.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;
}
}
.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;
}
html:not([data-auth-surface="app"]) .mobile-more-root { display: none !important; }
.auth-loading-page {
position: fixed; z-index: 10000; inset: 0;
display: grid;
place-items: center;
align-items: safe center;
min-height: 100vh; min-height: 100dvh;
overflow: auto;
padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
background: var(--cream, #f6f1e7);
box-sizing: border-box;
}
.entry-brand-mark { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; }
.entry-brand-mark svg { width: 100%; height: 100%; }
.entry-brand-mark img { display: block; width: 100%; height: auto; object-fit: contain; filter: brightness(0); opacity: .8; }
:root[data-color-theme="classic"] .entry-brand-mark img { display: none; }
:root:not([data-color-theme="classic"]) .entry-brand-mark svg { display: none; }
.auth-loading-card {
position: relative; isolation: isolate; overflow: hidden;
display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center;
gap: 0 14px; width: min(500px, 100%); padding: 32px;
border: 1px solid var(--k-palette-line); border-radius: var(--k-radius-overlay);
background: var(--paper); box-shadow: none; box-sizing: border-box;
}
.auth-loading-card::before { content: ""; position: absolute; z-index: -1; width: 104px; height: 76px; top: 18px; right: 20px; background: var(--k-organic-fan) center / contain no-repeat; opacity: .38; pointer-events: none; }
.auth-loading-mark { grid-column: 1; grid-row: 1; }
.auth-loading-copy { grid-column: 2; grid-row: 1; min-width: 0; }
.auth-loading-copy b { display: block; color: var(--green-deep); font-family: var(--display); font-size: 28px; letter-spacing: -.035em; line-height: 1.15; }
.auth-loading-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .1em; }
.auth-loading-title { grid-column: 1 / -1; margin: 28px 0 14px; color: var(--ink); font-family: var(--display); font-size: 25px; line-height: 1.2; letter-spacing: -.025em; }
.auth-loading-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; border-radius: var(--k-radius-card); background: var(--k-palette-state-soft); }
.auth-loading-status span { min-width: 0; color: var(--green-deep); font-size: 14px; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.auth-loading-status i { flex: 0 0 18px; width: 18px; height: 18px; border: 2px solid var(--k-palette-line-strong); border-top-color: var(--green-deep); border-radius: 50%; animation: auth-loading-spin 1.3s linear infinite; }
.auth-recovery-help[hidden] { display: none !important; }
.auth-recovery-help { grid-column: 1 / -1; min-width: 0; margin-top: 22px; }
.auth-recovery-help p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.auth-recovery-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.auth-recovery-actions button { min-height: 44px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--k-radius-control); background: var(--paper); color: var(--green-deep); font: 650 13px/1.4 var(--body, sans-serif); overflow-wrap: anywhere; cursor: pointer; }
.auth-recovery-actions button:first-child { border-color: var(--green-deep); background: var(--green-deep); color: #fffdf9; }
.auth-recovery-actions button:focus-visible { outline: 2px solid var(--k-palette-focus-light); outline-offset: 3px; }
.auth-recovery-actions button:disabled { opacity: .65; cursor: wait; }
@media (hover: hover) {
.auth-recovery-actions button:not(:disabled):hover { border-color: var(--green-deep); background: var(--k-palette-state-soft); }
.auth-recovery-actions button:first-child:not(:disabled):hover { background: var(--green); }
}
@media (max-width: 430px) {
.auth-loading-card { padding: 26px 20px; }
.auth-loading-card::before { width: 60px; height: 44px; top: 14px; right: 16px; opacity: .3; }
.auth-loading-title { font-size: 23px; }
.auth-recovery-actions { grid-template-columns: 1fr; }
}
@keyframes auth-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-loading-status i { animation: none; } }
.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); }
.confirm-modal-host.prompt-modal-host .prompt-modal .modal-head { padding-left: 26px; }
.confirm-modal-host.prompt-modal-host .prompt-modal .modal-body { padding-left: 26px; }
@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; }
.confirm-modal-host.prompt-modal-host .prompt-modal .modal-head { padding-left: 18px !important; }
.confirm-modal-host.prompt-modal-host .prompt-modal .modal-body { padding-left: 18px !important; }
}
@media (prefers-reduced-motion: reduce) { #modal-root .modal[data-modal-system="2"], .confirm-modal-host .confirm-modal { animation: none !important; } }
.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.state-cancelled { border-left-color: var(--muted); background: rgba(248,248,244,.92); opacity: .82; }
.project-next-check.cancelled { border-color: var(--muted); color: var(--muted); font-size: 19px; font-weight: 800; }
.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,.state-cancelled .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-links .task-order-missing { width: 100%; padding: 6px 8px; overflow: hidden; border-left: 2px solid var(--coral); border-radius: 0 8px 8px 0; background: rgba(224,122,95,.08); color: var(--coral-deep); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.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; }
}
/* Systemove sjednoceni UI (2026-08-19, systemui1) */
.login-preferred-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0 1px 7px;
}
.login-preferred-label span {
padding: 4px 7px;
border-radius: 999px;
background: rgba(47, 107, 72, .09);
color: var(--ok);
font-size: 8.5px;
font-weight: 850;
letter-spacing: .1em;
line-height: 1;
text-transform: uppercase;
}
.login-preferred-label small {
color: var(--muted);
font-size: 9.5px;
line-height: 1.3;
text-align: right;
}
.login-other-methods {
margin-top: 10px;
overflow: hidden;
border: 1px solid rgba(56, 85, 74, .14);
border-radius: 14px;
background: rgba(255, 253, 249, .7);
}
.login-other-methods > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 50px;
padding: 10px 12px;
list-style: none;
color: var(--green-deep);
cursor: pointer;
}
.login-other-methods > summary::-webkit-details-marker { display: none; }
.login-other-methods > summary > span {
display: grid;
gap: 2px;
min-width: 0;
}
.login-other-methods > summary b {
font-size: 11.5px;
line-height: 1.3;
}
.login-other-methods > summary small {
color: var(--muted);
font-size: 9.5px;
line-height: 1.35;
}
.login-other-methods > summary svg {
width: 18px;
height: 18px;
flex: 0 0 18px;
color: var(--sage-deep);
transition: transform .16s ease;
}
.login-other-methods > summary:hover { background: rgba(169, 184, 164, .08); }
.login-other-methods > summary:focus-visible {
outline: 3px solid var(--ui-focus);
outline-offset: -3px;
}
.login-other-methods[open] > summary {
border-bottom: 1px solid rgba(56, 85, 74, .1);
background: rgba(239, 232, 217, .48);
}
.login-other-methods[open] > summary svg { transform: rotate(180deg); }
.login-other-method-body { padding: 12px; }
.view-head.section-page-head { margin-bottom: 20px; }
.collection-hero.section-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 20px;
margin-bottom: 18px;
}
.collection-hero.section-page-head > div:first-child {
min-width: 0;
max-width: 720px;
}
.section-page-head .eyebrow,
.section-page-head .section-hero-kicker,
.section-page-head .finance-section-kicker {
font-size: 10px;
font-weight: 850;
letter-spacing: .15em;
line-height: 1.25;
text-transform: uppercase;
}
.view-head.section-page-head #view-title,
.collection-hero.section-page-head .view-title,
.section-hero.section-page-head .section-hero-copy h1,
.messenger-page-head.section-page-head h1 {
margin: 4px 0 0;
font-family: var(--display);
font-size: clamp(30px, 3vw, 36px);
font-weight: 800;
letter-spacing: -.035em;
line-height: 1.05;
}
.section-page-head .view-sub,
.section-hero.section-page-head .section-hero-copy p,
.messenger-page-head.section-page-head p {
margin-top: 7px;
font-size: 12.5px;
line-height: 1.5;
}
.login-email-status.is-error:not(:empty),
.access-request-status.is-error:not(:empty),
.password-security-status.is-error,
.meeting-agenda-add-feedback.is-error,
.appreciation-status.is-error,
.finance-history-empty.is-error,
.finance-party-note.is-error,
.finance-form-status.is-error,
.finance-rewards-autosave-status.is-error,
.document-magic-status.is-error,
.push-preview-key-status.is-bad,
.settings-status.bad,
.settings-drive-state.is-bad,
.drive-conn.is-bad,
.chat-compose-status.is-error,
.chat-thread-state.is-error {
color: var(--danger);
}
.login-email-status.is-error:not(:empty),
.access-request-status.is-error:not(:empty),
.finance-party-note.is-error,
.finance-form-status.is-error,
.chat-thread-state.is-error {
border-color: var(--danger-line);
background: var(--danger-soft);
}
.small-btn.danger,
.meeting-menu-item.danger,
.chat-menu-item.danger,
.chat-save-actions button.danger,
.task-flow-icon-btn.danger,
.project-modal-danger .danger,
.direct-e2ee-device button.danger,
.direct-e2ee-admin button.danger,
.gathering-more > div button.danger,
.meeting-note-row-menu-panel button.danger {
border-color: var(--danger-line);
color: var(--danger);
}
.small-btn.danger:hover,
.meeting-menu-item.danger:hover,
.chat-menu-item.danger:hover,
.chat-menu-item.danger:focus-visible {
border-color: rgba(119, 46, 40, .38);
background: var(--danger-soft);
color: var(--danger-deep);
}
.confirm-modal.is-danger .confirm-modal-mark,
.direct-e2ee-device-warning.is-danger {
background: var(--danger-soft);
color: var(--danger);
}
.settings-danger-badge,
.settings-management-danger .settings-management-section-head > span {
border-color: var(--danger-line);
background: var(--danger-soft);
color: var(--danger);
}
.settings-page-workspace[data-settings-workspace="organization"] .danger-settings-section,
.danger-settings-section {
border-color: var(--danger-line) !important;
background: rgba(255, 249, 247, .9);
}
@media (min-width: 861px) {
.sidebar {
overflow-x: hidden;
overscroll-behavior-x: none;
}
.sidebar .nav-list {
width: 100%;
min-width: 0;
max-width: 100%;
overflow-x: hidden;
overscroll-behavior-x: none;
scrollbar-gutter: stable;
touch-action: pan-y;
}
.sidebar .brand,
.sidebar .nav-btn,
.sidebar .nav-section-label,
.sidebar .group-filter,
.sidebar .sidebar-foot,
.sidebar .foot-btn,
.sidebar .session-card {
min-width: 0;
max-width: 100%;
}
.sidebar .nav-btn,
.sidebar .foot-btn,
.sidebar .session-card { box-sizing: border-box; }
}
@media (max-width: 860px) {
.collection-hero.section-page-head {
display: grid;
gap: 10px;
margin-bottom: 15px;
}
.view-head.section-page-head #view-title,
.collection-hero.section-page-head .view-title,
.section-hero.section-page-head .section-hero-copy h1,
.messenger-page-head.section-page-head h1 { font-size: 29px; }
}
@media (max-width: 430px) {
.login-preferred-label small { display: none; }
.login-other-methods > summary { min-height: 48px; }
.login-other-method-body { padding: 10px; }
}
:root {
--k-organic-sprig: url("./korenka-sprig.svg?v=20260924-calendarpalette1");
--k-organic-fan: url("./korenka-sprig-fan.svg?v=20260924-calendarpalette1");
--k-organic-seeds: url("./korenka-sprig-seeds.svg?v=20260924-calendarpalette1");
--k-organic-arcs: url("./korenka-growth-arcs.svg?v=20260924-calendarpalette1");
--k-organic-rings: url("./korenka-growth-rings.svg?v=20260924-calendarpalette1");
--k-organic-arcs-rise: url("./korenka-growth-arcs-rise.svg?v=20260924-calendarpalette1");
--k-organic-arcs-wide: url("./korenka-growth-arcs-wide.svg?v=20260924-calendarpalette1");
--k-organic-rings-drift: url("./korenka-growth-rings-drift.svg?v=20260924-calendarpalette1");
--k-organic-rings-orbit: url("./korenka-growth-rings-orbit.svg?v=20260924-calendarpalette1");
--k-organic-paper: url("./korenka-paper-grain.svg");
}
:root .app-shell.k-shell-working-print .main,
:root .settings-page-workspace {
background-image: var(--k-organic-paper);
background-size: 360px 360px !important;
}
:root .app-shell.k-shell-working-print :is(
.section-page-head,
#collection-view .collection-hero,
#collection-view .project-hero-card,
#collection-view .task-modal-hero,
#collection-view .person-hero,
#collection-view .messenger-page-head,
#collection-view .chat-detail-head,
#collection-view .meeting-hero-panel,
#collection-view .gathering-hero, #collection-view .idea-field-head
),
:root :is(.settings-page-heading, .trust-page .trust-hero, #modal-root .modal-head) {
background-image: var(--k-organic-heading, var(--k-organic-sprig)) !important;
background-repeat: no-repeat !important;
background-position: right 14px top 6px !important;
background-size: 164px 116px !important;
}
:root #modal-root .modal-head {
background-size: 108px 76px !important;
background-position: right 60px center !important;
}
:root .app-shell.k-shell-working-print #collection-view :is(.messenger-page-head, .chat-detail-head) {
background-size: 115px 82px !important;
background-position: right 12px top 0 !important;
}
@media (max-width: 760px) {
:root .app-shell.k-shell-working-print :is(.section-page-head, #collection-view .collection-hero, #collection-view .project-hero-card, #collection-view .task-modal-hero, #collection-view .person-hero, #collection-view .meeting-hero-panel, #collection-view .gathering-hero, #collection-view .idea-field-head),
:root :is(.settings-page-heading, .trust-page .trust-hero) {
background-size: 112px 80px !important;
background-position: right 3px top 6px !important;
}
}
@media (max-width: 760px) {
:root .app-shell.k-shell-working-print .view-head.is-event-day:has(#view-title) { background-position: right 3px top -12px !important; }
}
:root .app-shell.k-shell-working-print #collection-view:is(.view-projects, .view-finance, .view-ideas),
:root :is(.project-hero-card, .idea-detail-modal, .trust-page .trust-hero) { --k-organic-heading: var(--k-organic-fan); }
:root .app-shell.k-shell-working-print #collection-view:is(.view-people, .view-directChats),
:root :is(.person-hero, .settings-page-heading) { --k-organic-heading: var(--k-organic-seeds); }
:root .app-shell.k-shell-working-print #collection-view.view-meetings { --k-organic-heading: var(--k-organic-arcs); }
:root .app-shell.k-shell-working-print .view-head.is-event-day { --k-organic-heading: var(--k-organic-arcs-rise); }
:root {
--k-heading-paper: color-mix(in srgb, var(--k-palette-paper) 72%, var(--k-palette-canvas));
}
:root .app-shell.k-shell-working-print :is(
.view-head.section-page-head,
#collection-view .collection-hero,
#collection-view:is(.view-finance, .view-meetings) .section-page-head > :first-child,
#collection-view .meeting-hero-panel, #collection-view .gathering-hero,
#collection-view .messenger-page-head
),
:root .settings-page-workspace .settings-page-heading,
:root .trust-page .trust-hero {
min-width: 0;
background-color: var(--k-heading-paper) !important;
border: 1px solid var(--k-palette-line) !important;
border-radius: var(--k-radius-panel) !important;
box-shadow: none !important;
}
:root .app-shell.k-shell-working-print #collection-view :is(
.task-modal-hero, .person-hero, .idea-field-head
) {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
:root .app-shell.k-shell-working-print #collection-view .chat-detail-head {
border: 0 !important;
border-bottom: 1px solid var(--k-palette-line) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
:root .app-shell.k-shell-working-print :is(
.view-head.section-page-head, #collection-view .collection-hero,
#collection-view:is(.view-finance, .view-meetings) .section-page-head > :first-child,
#collection-view .meeting-hero-panel, #collection-view .gathering-hero
),
:root .settings-page-workspace .settings-page-heading,
:root .trust-page .trust-hero { padding: 28px 24px !important; }
:root .app-shell.k-shell-working-print #collection-view:is(.view-finance, .view-meetings) .section-page-head {
padding-top: 0;
background-image: none !important;
}
:root .app-shell.k-shell-working-print #collection-view:is(.view-finance, .view-meetings) .section-page-head > :first-child {
background-image: var(--k-organic-heading, var(--k-organic-sprig)) !important;
background-repeat: no-repeat !important;
background-position: right 14px top 6px !important;
background-size: 164px 116px !important;
}
:root .app-shell.k-shell-working-print #collection-view :is(.collection-hero .view-title, .section-page-head > :first-child h1) {
font-size: clamp(32px, 4vw, 46px);
line-height: 1.08;
}
@media (max-width: 760px) {
:root .app-shell.k-shell-working-print :is(
.view-head.section-page-head, #collection-view .collection-hero,
#collection-view:is(.view-finance, .view-meetings) .section-page-head > :first-child,
#collection-view .meeting-hero-panel, #collection-view .gathering-hero
),
:root .settings-page-workspace .settings-page-heading,
:root .trust-page .trust-hero { padding: 22px 16px !important; }
:root .app-shell.k-shell-working-print #collection-view:is(.view-finance, .view-meetings) .section-page-head > :first-child {
background-position: right 3px top 6px !important;
background-size: 112px 80px !important;
}
:root .app-shell.k-shell-working-print #collection-view :is(.collection-hero .view-title, .section-page-head > :first-child h1) { font-size: 30px; }
}
:root :is(.app-shell.k-shell-working-print, #modal-root, .settings-page-workspace, .trust-page) :is(.btn, .small-btn) { border-radius: var(--k-radius-control); }
:root :is(#collection-view .project-tabs.project-tabs-refined, #collection-view .finance-workspace-tabs, #collection-view .finance-rewards-subtabs, .settings-page-workspace .settings-tabs, #modal-root .event-block-tabs, #collection-view .event-block-tabs) {
gap: 6px !important;
padding: 6px !important;
border: 1px solid transparent !important;
border-radius: var(--k-radius-panel) !important;
background: var(--k-palette-paper-muted) !important;
box-shadow: none !important;
overflow: visible !important;
}
:root :is(#collection-view .project-tabs.project-tabs-refined, #collection-view .finance-workspace-tabs, #collection-view .finance-rewards-subtabs, .settings-page-workspace .settings-tabs, #modal-root .event-block-tabs, #collection-view .event-block-tabs) button {
min-width: 0 !important;
min-height: 44px !important;
padding: 10px 16px !important;
border: 1px solid transparent !important;
border-radius: var(--k-radius-control) !important;
background: transparent !important;
color: var(--k-palette-text-soft) !important;
font-size: 14px !important;
font-weight: 650;
line-height: 1.3 !important;
white-space: normal !important;
box-shadow: none !important;
transform: none !important;
}
:root :is(#collection-view .project-tabs.project-tabs-refined, #collection-view .finance-workspace-tabs, #collection-view .finance-rewards-subtabs, .settings-page-workspace .settings-tabs, #modal-root .event-block-tabs, #collection-view .event-block-tabs) button:hover {
background: var(--k-palette-paper) !important;
color: var(--k-palette-structure-deep) !important;
}
:root :is(#collection-view .project-tabs.project-tabs-refined, #collection-view .finance-workspace-tabs, #collection-view .finance-rewards-subtabs, .settings-page-workspace .settings-tabs, #modal-root .event-block-tabs, #collection-view .event-block-tabs) button:is(.active, .is-active, [aria-selected="true"]) {
border-color: color-mix(in srgb, var(--k-palette-structure) 22%, transparent) !important;
background: var(--k-palette-state-soft) !important;
color: var(--k-palette-structure-deep) !important;
font-weight: 750;
}
:root :is(#collection-view .project-tabs.project-tabs-refined, #collection-view .finance-workspace-tabs, #collection-view .finance-rewards-subtabs, .settings-page-workspace .settings-tabs, #modal-root .event-block-tabs, #collection-view .event-block-tabs) button:focus-visible {
outline: 2px solid var(--k-palette-structure-deep) !important;
outline-offset: 2px;
}
:root :is(#collection-view .finance-workspace-tabs, .settings-page-workspace .settings-tabs) button :is(b, small, .settings-tab-icon, .settings-tab-arrow) { color: inherit !important; }
:root #collection-view .finance-tab-copy b { font-size: inherit; }
:root :is(#modal-root, #collection-view) .event-block-tab::after { content: none; }
:root #collection-view :is(.finance-workspace-tabs, .finance-rewards-subtabs) {
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
grid-template-columns: none;
}
:root #collection-view .finance-workspace-tabs :is(.finance-tab-group, .finance-tab-group > div) { display: contents; }
:root #collection-view .finance-workspace-tabs button { width: auto; justify-content: center; grid-template-columns: auto auto; gap: 6px; text-align: center; }
:root #collection-view .finance-workspace-tabs button > small { min-width: 20px; padding: 3px 5px; border-radius: 3px; background: color-mix(in srgb, currentColor 10%, transparent); text-align: center; }
:root #collection-view .project-tabs.project-tabs-refined { margin-bottom: 6px; }
@media (max-width: 760px) {
:root #collection-view :is(.project-tabs.project-tabs-refined, .finance-workspace-tabs, .finance-rewards-subtabs),
:root :is(#modal-root, #collection-view) .event-block-tabs {
display: grid !important;
grid-auto-flow: row;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
:root #collection-view .project-tabs.project-tabs-refined:has(> button:nth-child(4)),
:root #collection-view .finance-workspace-tabs[data-tab-count="4"],
:root :is(#modal-root, #collection-view) .event-block-tabs:has(> button:nth-child(4)):not(:has(> button:nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root :is(#collection-view .project-tabs.project-tabs-refined, #collection-view .finance-workspace-tabs, #collection-view .finance-rewards-subtabs, .settings-page-workspace .settings-tabs, #modal-root .event-block-tabs, #collection-view .event-block-tabs) button { padding: 9px 7px !important; font-size: 13px !important; }
:root #collection-view .finance-tab-copy b { white-space: normal; }
}
@media (max-width: 760px) {
:root :is(#modal-root, #collection-view) .event-block-tabs:has(> button:nth-child(5)) > button:last-child { grid-column: span 2; }
}
:root :is(#modal-root, #collection-view) .event-block-tabs button { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
:root :is(#modal-root, #collection-view) .event-block-tabs button small { color: inherit; background: color-mix(in srgb, currentColor 10%, transparent); border-radius: 3px; }
@media (max-width: 360px) {
:root :is(#modal-root, #collection-view) .event-block-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print, (forced-colors: active) {
:root { --k-organic-sprig: none; --k-organic-fan: none; --k-organic-seeds: none; --k-organic-arcs: none; --k-organic-rings: none; --k-organic-arcs-rise: none; --k-organic-arcs-wide: none; --k-organic-rings-drift: none; --k-organic-rings-orbit: none; --k-organic-paper: none; }
}
:root .app-shell.k-shell-working-print #collection-view :is(.project-hero-top, .task-modal-hero, .person-hero, .idea-field-head, .messenger-page-head) { padding-block: 28px !important; }
@media (max-width: 760px) {
:root .app-shell.k-shell-working-print #collection-view :is(.project-hero-top, .task-modal-hero, .person-hero, .idea-field-head, .messenger-page-head) { padding-block: 22px !important; }
}
@media (forced-colors: active) {
:root :is(#collection-view .project-tabs.project-tabs-refined, #collection-view .finance-workspace-tabs, #collection-view .finance-rewards-subtabs, .settings-page-workspace .settings-tabs, #modal-root .event-block-tabs, #collection-view .event-block-tabs) button:is(.active, .is-active, [aria-selected="true"]) { border-color: Highlight !important; outline: 1px solid Highlight; outline-offset: -3px; }
}
/* Citelnější text, dotykové cíle a stránkové workflow (2026-08-19, a11yworkspaces1) */
:root {
--ui-copy-size: 14px;
--ui-support-size: 12.5px;
--ui-label-size: 10.5px;
}
.main :is(p, li),
#modal-root .modal-body :is(p, li),
.confirm-modal :is(p, li),
.login-card :is(p, li) {
font-size: var(--ui-copy-size);
}
.main small,
#modal-root .modal-body small,
.confirm-modal small,
.login-card small,
.panel-note,
.empty-mini,
.collection-note,
.view-sub,
.settings-section-intro,
.field > small,
.field > .hint,
.finance-step-lead,
.decision-field-note,
.decision-form-help,
.chat-compose-status {
font-size: var(--ui-support-size);
line-height: 1.45;
}
.main :is(input, select, textarea),
#modal-root :is(input, select, textarea) {
font-size: var(--ui-copy-size);
}
.main .field > label,
#modal-root .field > label,
.finance-document-form label,
.settings-row-copy > b {
font-size: var(--ui-copy-size);
}
:is(
.eyebrow,
.section-hero-kicker,
.finance-section-kicker,
.profile-eyebrow,
.pc-tag,
.meetcard-kind,
.focus-label,
.settings-page-heading-copy > span,
.nav-section-label,
.login-preferred-label > span,
.meeting-note-label,
.dependency-state,
.decision-status,
.finance-document-state > b
) {
font-size: var(--ui-label-size);
line-height: 1.25;
}
:is(
.project-detail,
.person-detail,
.task-detail-page,
.meeting-detail,
.meeting-workflow,
.finance-workspace,
.decision-registry,
.decision-detail,
.decision-form,
.decision-followup,
.obligation-book,
.obligation-detail,
.obligation-cycle-form,
.assurance-hub,
.assurance-detail,
.assurance-review-form,
.role-directory,
.role-detail,
.settings-page-workspace,
.messenger-page,
.fchat-msg
) :is(p, li, label, input, select, textarea) {
font-size: var(--ui-copy-size);
}
:is(
.project-detail,
.person-detail,
.task-detail-page,
.meeting-detail,
.meeting-workflow,
.finance-workspace,
.decision-registry,
.decision-detail,
.decision-form,
.decision-followup,
.obligation-book,
.obligation-detail,
.obligation-cycle-form,
.assurance-hub,
.assurance-detail,
.assurance-review-form,
.role-directory,
.role-detail,
.settings-page-workspace,
.messenger-page,
.fchat-msg
) small,
:is(.tk-meta, .tk-det, .pc-next, .pc-owner, .project-list-meta, .meeting-task-meta, .fchat-time, .fchat-author) {
font-size: var(--ui-support-size);
}
.tk-title,
.project-list-name,
.meeting-task-title,
.fchat-msg-text,
.fchat-row-main > b,
.fchat-row-main > small,
.finance-work-row b,
.decision-link-row b,
.role-work-row b {
font-size: var(--ui-copy-size);
}
#modal-root .page-workspace-modal:is(
.finance-document-modal,
.decision-registry-modal,
.decision-form-modal,
.decision-detail-modal,
.decision-followup-modal,
.obligation-book-modal,
.obligation-form-modal,
.obligation-detail-modal,
.obligation-cycle-modal,
.assurance-hub-modal,
.assurance-chooser-modal,
.assurance-form-modal,
.assurance-detail-modal,
.assurance-review-modal,
.role-directory-modal,
.role-form-modal,
.role-detail-modal
) > .modal-body {
padding-top: clamp(18px, 3vw, 30px);
background:
radial-gradient(circle at 88% 4%, rgba(209, 224, 207, .32), transparent 30%),
var(--cream-deep);
}
#modal-root .page-workspace-modal > .modal-head h3 {
overflow: hidden;
color: var(--green-deep);
font-family: var(--display);
font-size: 19px;
text-overflow: ellipsis;
white-space: nowrap;
}
#modal-root .page-workspace-modal :is(.decision-form-actions, .finance-modal-foot) {
position: sticky;
bottom: max(0px, env(safe-area-inset-bottom, 0px));
z-index: 12;
margin-top: 22px;
padding: 12px;
border: 1px solid rgba(47, 85, 69, .13);
border-radius: 16px;
background: rgba(255, 253, 248, .95);
box-shadow: 0 12px 30px rgba(43, 66, 58, .12);
backdrop-filter: blur(12px);
}
.operation-feedback {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) 36px;
align-items: start;
gap: 10px;
margin: 0 0 16px;
padding: 12px;
border: 1px solid var(--danger-line);
border-radius: 14px;
background: var(--danger-soft);
color: var(--danger-deep);
}
.operation-feedback > span {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--danger);
color: #fff;
font-weight: 850;
}
.operation-feedback b { font-size: 14px; }
.operation-feedback p { margin: 3px 0 0; color: var(--danger-deep); font-size: 13px !important; line-height: 1.45; }
.operation-feedback button {
width: 36px;
height: 36px;
border: 0;
border-radius: 9px;
background: transparent;
color: currentColor;
font-size: 20px;
cursor: pointer;
}
.prompt-modal { width: min(520px, calc(100vw - 28px)); }
.prompt-modal-message { margin: 0 0 11px; color: var(--muted); }
.prompt-modal-input {
width: 100%;
min-height: 46px;
padding: 11px 12px;
border: 1px solid var(--line);
border-radius: 11px;
background: #fff;
color: var(--ink);
font: 500 15px/1.45 var(--body);
resize: vertical;
}
.prompt-modal-input:focus { outline: 3px solid var(--ui-focus); outline-offset: 1px; }
body.larger-text {
--ui-copy-size: 16px;
--ui-support-size: 14px;
--ui-label-size: 11.5px;
}
body.larger-text :is(.btn, .small-btn, .nav-btn, .foot-btn, button:not(.x)) { font-size: 15px; }
body.larger-text :is(.tk-title, .pc-name, .project-list-name, .meeting-task-title, .fchat-msg-text) { font-size: 16px; }
@media (max-width: 860px) {
button,
:is(.btn, .small-btn, .nav-btn, .foot-btn, [role="button"], details > summary) {
min-height: 44px !important;
}
button:not(.meeting-rich-toolbar button):not(.chat-reaction button) { min-width: 44px !important; }
.workspace-search,
.workspace-notifications,
.workspace-add-menu > summary,
#modal-root .page-workspace-modal > .modal-head .x {
min-width: 44px;
width: auto;
min-height: 44px;
height: 44px;
}
.workspace-notifications { flex-basis: 44px; width: 44px; }
.workspace-search { padding: 7px 10px; }
.workspace-add-menu > summary { padding: 7px 11px; }
.main :is(input, select, textarea),
#modal-root :is(input, select, textarea) {
min-height: 44px !important;
font-size: 16px !important;
}
input[type="checkbox"], input[type="radio"] {
min-width: 22px;
width: 22px;
min-height: 22px;
height: 22px;
}
#modal-root .page-workspace-modal > .modal-body { padding: 16px 13px calc(28px + env(safe-area-inset-bottom, 0px)); }
#modal-root .page-workspace-modal :is(.decision-form-actions, .finance-modal-foot) {
gap: 8px;
margin-right: -3px;
margin-left: -3px;
padding: 9px;
}
#modal-root .page-workspace-modal :is(.decision-form-actions, .finance-modal-foot) .btn { flex: 1 1 auto; }
}
/* Stage 6.5 system surfaces: start */
.settings-page-workspace {
width: min(1080px, 100%);
gap: 22px;
}
.settings-page-workspace[data-settings-workspace="organization"] {
width: min(1140px, 100%);
gap: 16px;
}
.settings-page-workspace .settings-page-heading {
align-items: center;
gap: 18px;
padding: 0 0 17px;
border-bottom: 1px solid rgba(47, 85, 69, .22);
}
.settings-page-workspace[data-settings-workspace="organization"] .settings-page-heading {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 16px;
padding: 3px 2px 1px;
border: 0;
}
.settings-page-heading-copy {
min-width: 0;
}
.settings-page-workspace .settings-page-heading .btn {
width: auto;
min-height: 44px;
border: 0;
border-radius: var(--k-radius-control);
background: transparent;
box-shadow: none;
}
.settings-page-workspace[data-settings-workspace="organization"] .settings-page-heading .btn {
min-height: 44px;
border-color: rgba(47, 85, 69, .13);
background: rgba(255, 253, 248, .76);
color: var(--green-deep);
}
.settings-page-workspace .settings-page-heading .btn:hover {
background: rgba(47, 85, 69, .055);
box-shadow: none;
}
.settings-page-workspace .settings-page-heading h1 {
margin-top: 2px;
font-size: clamp(29px, 3.4vw, 38px);
}
.settings-page-workspace .settings-page-heading p {
max-width: 670px;
font-size: 12.5px;
}
.settings-page-workspace .settings-page-scope-badge,
.settings-page-workspace .settings-panel-access,
.settings-page-workspace .settings-danger-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--muted);
font-size: 10.5px;
font-weight: 850;
letter-spacing: .12em;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
}
.settings-page-workspace[data-settings-workspace="organization"] .settings-page-scope-badge {
align-self: center;
margin-top: 7px;
padding-left: 13px;
border-left: 2px solid var(--coral);
color: var(--green-deep);
}
.settings-page-workspace > .settings-modal-layout,
.settings-page-workspace[data-settings-workspace="organization"] > .settings-modal-layout {
display: grid;
grid-template-columns: 218px minmax(0, 1fr);
align-items: start;
gap: clamp(28px, 4vw, 48px);
min-height: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.settings-page-workspace .settings-tabs,
.settings-page-workspace[data-settings-workspace="organization"] .settings-tabs {
position: sticky;
top: 22px;
display: grid;
align-content: start;
gap: 0;
width: auto;
height: auto;
padding: 0;
overflow: visible;
border: 0;
border-top: 2px solid var(--green-deep);
border-right: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.settings-page-workspace .settings-tabs-heading,
.settings-page-workspace[data-settings-workspace="organization"] .settings-tabs-heading {
display: grid;
gap: 4px;
margin: 0;
padding: 15px 7px 14px;
border: 0;
border-bottom: 1px solid rgba(47, 85, 69, .18);
background: transparent;
}
.settings-page-workspace .settings-tabs-heading b {
color: var(--ink);
font-size: 15px;
}
.settings-page-workspace .settings-tabs-heading small {
color: var(--muted);
font-size: 11.5px;
line-height: 1.45;
}
.settings-page-workspace .settings-tab,
.settings-page-workspace[data-settings-workspace="organization"] .settings-tab {
position: relative;
display: grid;
grid-template-columns: 28px minmax(0, 1fr) 18px;
align-items: center;
gap: 9px;
min-height: 62px;
padding: 9px 7px;
overflow: visible;
border: 0;
border-left: 3px solid transparent;
border-bottom: 1px solid rgba(47, 85, 69, .13);
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--muted);
text-align: left;
transform: none;
}
.settings-page-workspace .settings-tab:hover,
.settings-page-workspace[data-settings-workspace="organization"] .settings-tab:hover {
border-color: rgba(47, 85, 69, .13);
border-left-color: var(--sage);
background: rgba(47, 85, 69, .035);
box-shadow: none;
color: var(--green-deep);
transform: none;
}
.settings-page-workspace .settings-tab.is-active,
.settings-page-workspace[data-settings-workspace="organization"] .settings-tab.is-active {
border-color: rgba(47, 85, 69, .13);
border-left-color: var(--coral);
background: transparent;
box-shadow: none;
color: var(--green-deep);
}
.settings-page-workspace .settings-tab.is-active::before,
.settings-page-workspace[data-settings-workspace="organization"] .settings-tab.is-active::before {
content: none;
}
.settings-tab-index {
color: var(--coral-deep);
font-family: var(--display);
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.settings-page-workspace .settings-tab-copy b {
font-size: 12.5px;
line-height: 1.25;
}
.settings-page-workspace .settings-tab-copy small {
margin-top: 3px;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.settings-page-workspace .settings-tab-arrow {
color: var(--coral-deep);
font-size: 14px;
opacity: 0;
transform: none;
}
.settings-page-workspace .settings-tab.is-active .settings-tab-arrow {
opacity: 1;
}
.settings-page-workspace .settings-panels,
.settings-page-workspace[data-settings-workspace="organization"] .settings-panels {
min-width: 0;
height: auto;
padding: 0;
overflow: visible;
background: transparent;
}
.settings-page-workspace .settings-panel,
.settings-page-workspace[data-settings-workspace="organization"] .settings-panel {
gap: 0;
}
.settings-page-workspace .settings-chapter-heading,
.settings-page-workspace .settings-panel-hero,
.settings-page-workspace .settings-workspace-section-heading {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: start;
gap: 15px;
min-width: 0;
margin: 0;
padding: 0 0 20px;
border: 0;
border-bottom: 2px solid var(--green-deep);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.settings-page-workspace :is(
.settings-chapter-heading,
.settings-panel-hero,
.settings-workspace-section-heading
) > div {
min-width: 0;
}
.settings-page-workspace .settings-chapter-mark {
display: block;
width: auto;
height: auto;
padding-top: 3px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--coral-deep);
font-family: var(--display);
font-size: 19px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.settings-page-workspace .settings-panel-kicker,
.settings-page-workspace .settings-workspace-section-heading > div > small {
display: block;
margin: 0 0 3px;
color: var(--coral-deep);
font-size: 11px;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.settings-page-workspace .settings-panel-hero h4,
.settings-page-workspace .settings-workspace-section-heading h2 {
margin: 0;
color: var(--ink);
font-family: var(--display);
font-size: clamp(23px, 3vw, 29px);
letter-spacing: -.025em;
line-height: 1.08;
}
.settings-page-workspace .settings-panel-hero p,
.settings-page-workspace .settings-workspace-section-heading p {
max-width: 640px;
margin: 6px 0 0;
color: var(--muted);
font-size: 12.5px;
line-height: 1.5;
}
.settings-page-workspace .settings-card-section,
.settings-page-workspace[data-settings-workspace="organization"] .settings-card-section {
margin: 0;
padding: 24px 0 25px;
border: 0;
border-bottom: 1px solid rgba(47, 85, 69, .2);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.settings-page-workspace .settings-section-title {
color: var(--ink);
font-family: var(--display);
font-size: 18px;
line-height: 1.25;
}
.settings-page-workspace .settings-section-intro {
max-width: 680px;
margin: 5px 0 14px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.5;
}
.settings-page-workspace .settings-row {
min-height: 68px;
margin: 0;
padding: 11px 2px;
border: 0;
border-top: 1px solid rgba(47, 85, 69, .11);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.settings-page-workspace .settings-row:hover {
background: rgba(47, 85, 69, .025);
box-shadow: none;
}
.settings-page-workspace .settings-row-text b {
font-size: 12.5px;
}
.settings-page-workspace .settings-row-text small {
max-width: 620px;
margin-top: 4px;
font-size: 11.5px;
line-height: 1.45;
}
.settings-page-workspace :is(.settings-select, .settings-text-input) {
min-height: 44px;
border-radius: 6px;
background: var(--paper);
box-shadow: none;
}
.settings-page-workspace .settings-row-btn,
.settings-page-workspace .settings-account-actions .small-btn,
.settings-page-workspace .settings-security-actions .small-btn {
min-height: 44px;
border-radius: var(--k-radius-control);
box-shadow: none;
}
.settings-page-workspace .settings-account-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
}
.settings-page-workspace .settings-account-avatar {
box-shadow: none;
}
.settings-page-workspace .settings-security-card,
.settings-page-workspace .settings-security-card .settings-security-note {
background: transparent;
box-shadow: none;
}
.settings-page-workspace .settings-security-card .settings-security-head {
grid-template-columns: 38px minmax(0, 1fr);
padding-bottom: 14px;
border-bottom: 1px solid rgba(47, 85, 69, .12);
}
.settings-page-workspace .settings-security-icon {
width: 38px;
height: 38px;
border-radius: var(--k-radius-control);
background: transparent;
color: var(--green-deep);
}
.settings-page-workspace .settings-auth-method {
min-height: 30px;
border-radius: var(--k-radius-control);
box-shadow: none;
}
.settings-page-workspace .settings-security-note {
padding: 13px 0;
border: 0;
border-top: 1px solid rgba(47, 85, 69, .11);
border-radius: 0;
}
.settings-page-workspace .settings-about-facts {
border-top: 1px solid rgba(47, 85, 69, .12);
}
.settings-page-workspace .settings-about-facts > div {
border-radius: 0;
background: transparent;
box-shadow: none;
}
.settings-page-workspace .settings-organization-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
gap: 0;
}
.settings-page-workspace .settings-governance-card,
.settings-page-workspace .settings-operations-card {
min-height: 0;
}
.settings-page-workspace .settings-operations-card {
background: transparent;
}
[data-settings-workspace="organization"] .settings-governance-card { padding-top: 0; }
.spolek-routes { display: grid; }
.spolek-route-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 24px 4px; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; }
.spolek-route-row span { display: grid; gap: 8px; }
.spolek-route-row b { font-size: clamp(19px,2.5vw,25px); }
.spolek-route-row small { color: var(--muted); font-size: 14px; line-height: 1.5; }
.spolek-route-row i { font-style: normal; color: var(--k-palette-action); font-size: 23px; }
.spolek-route-row:hover { background: var(--k-palette-paper-muted); }
.spolek-related { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0; }
.spolek-related button { min-height: 44px; }
.role-directory-search { display: grid; gap: 8px; margin: 22px 0 14px; font-size: 14px; font-weight: 650; }
.role-directory-search input { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--k-palette-paper); color: var(--ink); font: inherit; }
.role-directory-filters { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.role-directory-filters button { min-height: 44px; padding: 9px 12px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.role-directory-filters button[aria-pressed="true"] { background: var(--k-palette-paper-muted); border-bottom-color: var(--k-palette-action); font-weight: 700; }
.role-directory-count { color: var(--muted); font-size: 13px; }
.role-directory .role-directory-list { grid-template-columns: minmax(0,1fr); gap: 0; }
.role-directory .role-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.role-directory .role-card > button { min-height: 88px; padding: 20px 4px; border-radius: 0; }
.role-directory .role-card-icon { display: none; }
.role-directory .role-card > button { grid-template-columns: minmax(0,1fr) auto; }
.role-directory .role-card-copy p { max-width: 76ch; -webkit-line-clamp: 3; line-clamp: 3; }
.role-directory .role-card-copy b { font-size: 17px; line-height: 1.35; }
.role-directory .role-card-copy strong { color: var(--ink); font-size: 14px; }
.role-directory .role-card-copy em { color: #514c41; background: #efebe1; font-size: 12px; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.role-contact { margin: 22px 0; }
.role-contact h3 { font-size: 18px; }
.role-contact-people { display: flex; flex-wrap: wrap; gap: 12px; }
.role-contact-person { display: grid; gap: 5px; flex: 1 1 220px; min-width: 0; padding: 14px; text-align: left; border: 1px solid var(--line); border-radius: 5px; background: var(--k-palette-paper-muted); color: var(--ink); cursor: pointer; }
.role-contact-person span, .role-contact-person small { color: var(--muted); font-size: 12px; }
.role-contact-person b { font-size: 18px; overflow-wrap: anywhere; }
.role-work-inbox .role-work-row { min-height: 48px; }
.role-work-inbox .role-work-row b { white-space: normal; overflow-wrap: anywhere; }
.role-work-inbox .role-work-more { min-height: 44px; margin: 12px auto 0; }
.organization-catalog-notice, .role-work-incomplete { margin: 16px 0; padding: 12px; border-left: 3px solid #ad7b44; background: #f4eee0; font-size: 13px; line-height: 1.5; }
.organization-catalog-notice p { margin-top: 0; }
.organization-catalog-notice button { min-height: 44px; }
@media (max-width: 600px) {
.role-directory-filters button { flex: 1 1 90px; font-size: 13px; padding: 8px; }
.role-work-inbox .role-work-row { grid-template-columns: 24px minmax(0,1fr) 12px; }
.role-work-inbox .role-work-row > small { display: block; grid-column: 2; grid-row: 2; }
.role-work-inbox .role-work-row > i { grid-column: 3; grid-row: 1; }
}
.settings-page-workspace .settings-management-sections {
display: grid;
gap: 0;
counter-reset: settings-management;
}
.settings-page-workspace .settings-management-section {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 22px;
padding: 26px 0;
border-bottom: 1px solid rgba(47, 85, 69, .2);
counter-increment: settings-management;
min-width: 0;
}
.settings-page-workspace .settings-management-section + .settings-management-section {
padding-top: 26px;
border-top: 0;
}
.settings-page-workspace .settings-management-section-head {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
align-items: center;
align-content: start;
gap: 9px;
min-width: 0;
padding: 1px 0 0;
}
.settings-page-workspace .settings-management-section-head > span {
align-items: center;
display: block;
width: auto;
height: auto;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--coral-deep);
font-size: 0;
font-weight: 850;
}
.settings-page-workspace .settings-management-section-head > div {
min-width: 0;
}
.settings-page-workspace .settings-management-section-head > span::before {
content: "0" counter(settings-management);
font-family: var(--display);
font-size: 14px;
font-weight: 800;
}
.settings-page-workspace .settings-management-section-head > span svg {
display: none;
}
.settings-page-workspace .settings-management-section-head h5 {
margin: 2px 0 0;
color: var(--ink);
font-family: var(--display);
font-size: 16px;
line-height: 1.2;
}
.settings-page-workspace .settings-management-section-head small {
display: block;
color: var(--coral-deep);
font-weight: 850;
letter-spacing: .13em;
}
.settings-page-workspace .settings-management-section-head p {
margin: 5px 0 0;
color: var(--muted);
font-size: 11.5px;
line-height: 1.4;
}
.settings-page-workspace .settings-management-cards,
.settings-page-workspace .settings-management-cards-two,
.settings-page-workspace .settings-control-admin-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
min-width: 0;
}
.settings-page-workspace .settings-management-cards .settings-card-section {
padding-top: 0;
padding-bottom: 0;
border-bottom: 0;
}
.settings-page-workspace .settings-management-cards-two > .settings-card-section + .settings-card-section {
padding-top: 22px;
border-top: 1px solid rgba(47, 85, 69, .13);
}
.settings-page-workspace .settings-drive-admin-card .settings-text-row {
grid-template-columns: minmax(190px, .8fr) minmax(240px, 1.2fr);
}
.settings-page-workspace .settings-management-danger {
margin-top: 7px;
padding: 24px 18px;
border: 1px solid var(--danger-line);
border-left: 4px solid var(--danger);
background: var(--danger-soft);
}
.settings-page-workspace .settings-management-danger .settings-management-section-head > span {
border: 0;
background: transparent;
color: var(--danger);
}
.settings-page-workspace .settings-management-danger .danger-settings-section {
border: 0 !important;
background: transparent;
}
.settings-page-workspace .settings-danger-badge {
display: flex;
padding-left: 8px;
border-left: 2px solid var(--danger);
color: var(--danger);
}
.settings-page-workspace .settings-section-title-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.settings-page-workspace .settings-section-title-line > span:first-child {
display: block;
}
.settings-page-workspace > .settings-page-foot {
position: sticky;
bottom: 0;
z-index: 8;
min-height: 60px;
padding: 9px 0 9px 16px;
border: 0;
border-top: 1px solid rgba(47, 85, 69, .22);
border-radius: 0;
background: rgba(251, 248, 240, .97);
box-shadow: none;
backdrop-filter: none;
}
.settings-page-workspace > .settings-page-foot .settings-save-btn {
width: auto;
min-height: 44px;
border: 1px solid var(--coral-deep);
border-radius: var(--k-radius-control);
color: #fff;
background: var(--coral);
background-image: none;
box-shadow: none;
}
.settings-page-workspace > .settings-page-foot .settings-save-btn:disabled {
border-color: rgba(47, 85, 69, .24);
color: var(--green-deep);
background: transparent;
background-image: none;
opacity: 1;
}
.trust-page {
display: grid;
gap: 0;
width: min(1060px, 100%);
margin: 0 auto;
}
.trust-page .trust-hero,
.trust-page .trust-heading {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
align-items: start;
gap: 17px;
margin: 0;
padding: 0 0 28px;
overflow: visible;
border: 0;
border-bottom: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.trust-page .trust-hero::after {
content: none;
}
.trust-page .trust-hero-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid rgba(184, 69, 48, .3);
border-radius: var(--k-radius-control);
background: rgba(184, 69, 48, .055);
color: var(--coral-deep);
box-shadow: none;
}
.trust-page .trust-hero-icon svg {
width: 23px;
height: 23px;
}
.trust-page .trust-hero > div > p:first-child {
margin: 1px 0 3px;
color: var(--coral-deep);
font-size: 11.5px;
letter-spacing: .03em;
text-transform: none;
}
.trust-page .trust-hero h1 {
margin: 0;
font-size: clamp(31px, 4vw, 42px);
letter-spacing: -.035em;
}
.trust-page .trust-hero p:last-child {
max-width: 760px;
margin: 8px 0 0;
font-size: 14px;
line-height: 1.6;
}
.trust-page .trust-crisis {
margin: 0;
padding: 24px 26px 22px;
border: 0;
border-left: 4px solid var(--coral-deep);
border-radius: 0;
background: rgba(184, 69, 48, .045);
box-shadow: none;
}
.trust-page .trust-crisis-head {
align-items: start;
margin-bottom: 20px;
}
.trust-page .trust-crisis-head > div > p:first-child {
margin-bottom: 4px;
font-size: 11.5px;
letter-spacing: .03em;
text-transform: none;
}
.trust-page .trust-crisis-head h2 {
max-width: 680px;
font-size: 22px;
}
.trust-page .trust-crisis-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(18px, 3vw, 30px);
border: 0;
}
.trust-page .trust-crisis-card,
.trust-page .trust-crisis-card.urgent {
grid-template-columns: 32px minmax(0, 1fr);
gap: 10px;
padding: 0;
border: 0;
border-left: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.trust-page .trust-crisis-card:first-child {
border-left: 0;
}
.trust-page .trust-crisis-icon,
.trust-page .trust-crisis-card.urgent .trust-crisis-icon {
align-self: start;
width: 28px;
height: 28px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--green-deep);
}
.trust-page .trust-crisis-card.urgent .trust-crisis-icon {
color: var(--coral-deep);
}
.trust-page .trust-crisis-icon svg {
width: 24px;
height: 24px;
}
.trust-page .trust-crisis-card small {
font-size: 11.5px;
letter-spacing: .02em;
text-transform: none;
}
.trust-page .trust-crisis-card p {
font-size: 12.5px;
line-height: 1.5;
}
.trust-page .trust-crisis-actions a {
min-height: 44px;
padding: 8px 12px;
border: 1px solid rgba(47, 85, 69, .22);
border-radius: var(--k-radius-control);
background: var(--paper);
box-shadow: none;
font-size: 12px;
}
.trust-page .trust-crisis-actions a:hover {
background: var(--green-deep);
}
.trust-page .trust-crisis-foot {
margin: 16px 0 0;
font-size: 11.5px;
line-height: 1.5;
}
.trust-page .trust-layout {
grid-template-columns: minmax(0, 1.6fr) minmax(280px, .72fr);
gap: clamp(38px, 6vw, 64px);
margin-top: 48px;
}
.trust-page .trust-form-card,
.trust-page .trust-recipient-card,
.trust-page .trust-transparency,
.trust-page .trust-tech,
.trust-page .trust-key-tools,
.trust-page .trust-key-tools.waiting {
border: 0;
border-top: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.trust-page .trust-form-card {
padding: 0;
}
.trust-page .trust-form-intro {
align-items: start;
margin: 0 0 30px;
padding: 22px 0 0;
border-top: 2px solid var(--green-deep);
border-bottom: 0;
}
.trust-page .trust-form-intro h2 {
font-size: clamp(24px, 3vw, 30px);
}
.trust-page .trust-lock-badge {
grid-template-columns: 22px auto;
padding: 7px 0 7px 11px;
border-left: 1px solid rgba(47, 85, 69, .22);
border-radius: 0;
background: transparent;
color: var(--green-deep);
}
.trust-page .trust-lock-badge svg {
width: 20px;
height: 20px;
}
.trust-page .trust-form {
gap: 24px;
}
.trust-page .trust-mode-grid {
grid-template-columns: minmax(0, 1fr);
gap: 0;
border-top: 1px solid rgba(47, 85, 69, .18);
border-bottom: 1px solid rgba(47, 85, 69, .18);
}
.trust-page .trust-mode {
grid-template-columns: 32px minmax(0, 1fr);
min-height: 76px;
padding: 13px 8px;
border: 0;
border-bottom: 1px solid rgba(47, 85, 69, .12);
border-radius: 0;
background: transparent;
box-shadow: none;
transform: none;
}
.trust-page .trust-mode:hover {
background: rgba(47, 85, 69, .035);
transform: none;
}
.trust-page .trust-mode:last-child {
border-bottom: 0;
}
.trust-page .trust-mode:has(input:checked) {
border-color: rgba(47, 85, 69, .12);
border-left: 4px solid var(--coral);
padding-left: 12px;
background: rgba(47, 85, 69, .04);
box-shadow: none;
}
.trust-page .trust-mode-mark {
width: 30px;
height: 30px;
border-radius: 0;
background: transparent;
color: var(--green-deep);
}
.trust-page .trust-mode-mark svg {
width: 20px;
height: 20px;
}
.trust-page .trust-form :is(input[type="text"], select, textarea) {
min-height: 48px;
border-radius: var(--k-radius-control);
background: var(--paper);
box-shadow: none;
}
.trust-page .trust-check,
.trust-page .trust-consent {
min-height: 62px;
padding: 15px 14px;
border: 0;
border-radius: 0;
background: rgba(47, 85, 69, .035);
box-shadow: none;
}
.trust-page .trust-consent {
padding-left: 14px;
border-left: 3px solid var(--green-deep);
}
.trust-page .trust-submit-row {
padding-top: 6px;
border-top: 0;
}
.trust-page .trust-submit {
border-color: var(--coral-deep);
border-radius: var(--k-radius-control);
background: var(--coral);
background-image: none;
box-shadow: none;
}
.trust-page .trust-aside {
min-width: 0;
gap: 0;
top: 20px;
padding: 24px 22px;
background: rgba(47, 85, 69, .045);
}
.trust-page .trust-recipient-card,
.trust-page .trust-transparency,
.trust-page .trust-key-tools,
.trust-page .trust-key-tools.waiting {
padding: 0;
border: 0;
background: transparent;
}
.trust-page .trust-recipient-card,
.trust-page .trust-recipient-person,
.trust-page .trust-recipient-person > div,
.trust-page .trust-recipient-email,
.trust-page .trust-encrypted-pill,
.trust-page .trust-transparency {
min-width: 0;
}
.trust-page .trust-recipient-person h2 {
overflow-wrap: break-word;
}
.trust-page .trust-recipient-email span,
.trust-page .trust-encrypted-pill span {
min-width: 0;
overflow-wrap: anywhere;
}
.trust-page .trust-transparency,
.trust-page .trust-key-tools,
.trust-page .trust-key-tools.waiting {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid rgba(47, 85, 69, .16);
}
.trust-page .trust-person-avatar {
width: 48px !important;
height: 48px !important;
flex-basis: 48px !important;
border-radius: 50% !important;
box-shadow: none;
}
.trust-page .trust-recipient-email,
.trust-page .trust-encrypted-pill,
.trust-page .trust-encrypted-pill.waiting {
padding: 10px 11px;
border: 0;
border-radius: 0;
background: rgba(255, 253, 248, .66);
box-shadow: none;
}
.trust-page .trust-encrypted-pill {
color: var(--green-deep);
}
.trust-page .trust-transparency > p:first-child {
margin-bottom: 9px;
}
.trust-page .trust-transparency ol {
gap: 0;
}
.trust-page .trust-transparency li {
padding: 8px 0;
border-bottom: 0;
}
.trust-page .trust-transparency li > span {
width: 24px;
height: 24px;
border-radius: 0;
background: transparent;
color: var(--coral-deep);
}
.trust-page .trust-tech {
overflow: visible;
margin-top: 22px;
border-top: 1px solid rgba(47, 85, 69, .18);
}
.trust-page .trust-tech summary {
min-height: 44px;
padding: 12px 0;
}
.trust-page .trust-tech p {
padding: 0 0 15px;
}
.trust-page .trust-key-state,
.trust-page .trust-key-state.missing {
border-radius: var(--k-radius-control);
box-shadow: none;
}
.trust-page .trust-key-actions .btn {
border-radius: var(--k-radius-control);
box-shadow: none;
}
.trust-page .trust-key-loading,
.trust-page .trust-key-gate {
min-height: 420px;
}
.trust-page .trust-key-loading-mark,
.trust-page .trust-key-gate-icon {
width: 58px;
height: 58px;
border: 1px solid rgba(47, 85, 69, .22);
border-radius: var(--k-radius-control);
background: transparent;
color: var(--green-deep);
}
.trust-page .trust-success-icon {
border-radius: var(--k-radius-control);
box-shadow: none;
}
#login-page.login-page { place-items: center; align-items: safe center; padding: clamp(20px, 5vw, 60px); background: var(--cream); }
#login-page .login-card { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); width: min(920px, 100%); max-width: none; min-height: 0; padding: 0; overflow: hidden; border: 1px solid var(--k-palette-line); border-radius: var(--k-radius-overlay); background: var(--paper); box-shadow: none; }
#login-page .login-brand-panel { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 32px; padding: 36px 30px; overflow: hidden; border: 0; background: var(--k-palette-state-soft); color: var(--ink); }
#login-page .login-brand-panel::after { content: ""; position: absolute; z-index: -1; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; box-shadow: none; background: var(--k-organic-fan) right -12px bottom 120px / 200px auto no-repeat; opacity: .65; pointer-events: none; }
#login-page .login-brand-mast { align-self: start; gap: 12px; }
#login-page .login-logo { width: 52px; height: 52px; }
#login-page .login-brand-wordmark b { color: var(--green-deep); font-size: 24px; }
#login-page .login-brand-wordmark small { color: var(--muted); font-size: 11px; }
#login-page .login-brand-copy { align-self: start; padding: 0; }
#login-page .login-eyebrow { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 550; letter-spacing: 0; text-transform: none; }
#login-page .login-title { max-width: 9ch; margin: 0 0 16px; color: var(--ink); font-size: clamp(32px, 3.5vw, 40px); line-height: 1.08; letter-spacing: -.035em; }
#login-page .login-lead { max-width: 28ch; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
#login-page .login-brand-foot { display: grid; gap: 18px; margin-top: auto; padding-top: 60px; border: 0; }
#login-page .login-trust-note { grid-template-columns: 20px minmax(0, 1fr); gap: 9px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 12px; line-height: 1.55; box-shadow: none; }
#login-page .login-trust-note svg { width: 18px; height: 18px; padding: 0; background: transparent; color: var(--green); }
#login-page .login-trust-note b { margin-bottom: 4px; color: var(--green-deep); font-size: 12px; }
#login-page .login-brand-org { text-transform: none; letter-spacing: 0; font-weight: 500; margin: 0; color: var(--muted); text-align: left; font-size: 12px; line-height: 1.5; }
#login-page .login-access-panel { display: block; min-width: 0; padding: 36px; border: 0; background: var(--paper); }
#login-page .login-access-inner { width: 100%; max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#login-page .login-access-head { margin-bottom: 26px; }
#login-page .login-access-head h2 { margin: 0 0 9px; font-size: 28px; line-height: 1.2; }
#login-page .login-access-head p { max-width: 36ch; color: var(--muted); font-size: 14px; line-height: 1.55; }
#login-page .login-preferred-label { align-items: baseline; gap: 8px; margin: 0 0 8px; padding: 0; border: 0; }
#login-page .login-preferred-label span { padding: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 550; letter-spacing: 0; text-transform: none; }
#login-page .login-preferred-label small { color: var(--muted); font-size: 12px; line-height: 1.4; }
#login-page .login-provider-btn { min-height: 54px; border: 1px solid var(--green-deep); border-radius: var(--k-radius-control); background: var(--green-deep); color: #fffdf9; font-size: 14px; box-shadow: none; transform: none; }
#login-page .login-provider-btn > svg { width: 22px; height: 22px; padding: 5px; border-radius: 8px; background: var(--paper); box-sizing: content-box; }
#login-page .login-provider-btn:hover:not(:disabled) { border-color: var(--green); background: var(--green); color: #fffdf9; box-shadow: none; transform: none; }
#login-page .login-provider-btn.is-busy [data-google-login-label]::after { border-color: rgba(255,253,249,.35); border-top-color: #fffdf9; }
#login-page .login-other-methods { margin-top: 12px; overflow: hidden; border: 1px solid var(--k-palette-line); border-radius: var(--k-radius-card); background: var(--paper); box-shadow: none; }
#login-page .login-other-methods > summary { min-height: 58px; padding: 12px 14px; }
#login-page .login-other-methods > summary b { font-size: 13px; }
#login-page .login-other-methods > summary small { color: var(--muted); font-size: 12px; }
#login-page .login-other-methods[open] > summary { background: var(--k-palette-state-soft); }
#login-page .login-other-method-body { padding: 16px 14px; }
#login-page .login-method-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 0; border-radius: var(--k-radius-control); background: var(--k-palette-paper-muted); box-shadow: none; }
#login-page .login-method-tabs button { min-height: 44px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); box-shadow: none; font-size: 12px; line-height: 1.4; }
#login-page .login-method-tabs button.is-active { background: var(--paper); color: var(--ink); box-shadow: none; }
#login-page .login-email-form input, #login-page .login-email-row input, #login-page .login-email-form .btn { min-height: 46px; border-radius: var(--k-radius-control); box-shadow: none; }
#login-page .login-email-form input { background: var(--paper); color: var(--ink); border-color: var(--k-palette-line-strong); font-size: 16px; }
#login-page :is(.login-password-form, .login-email-form) label { font-size: 12px; font-weight: 600; }
#login-page .login-email-form .btn.btn-primary { border-color: var(--coral); background: var(--coral); color: #fffdf9; background-image: none; box-shadow: none; }
#login-page .login-email-status:not(:empty) { border-radius: var(--k-radius-control); font-size: 13px; line-height: 1.5; box-shadow: none; }
#login-page .login-security-row { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 22px; padding: 16px; border: 0; border-radius: var(--k-radius-card); background: var(--k-palette-state-soft); }
#login-page .login-private-device { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#login-page .login-private-device input { width: 20px; height: 20px; margin: 0; }
#login-page .login-private-device b { color: var(--green-deep); font-size: 13px; }
#login-page .login-private-device small, #login-page .login-privacy-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
#login-page .login-request-access { margin-top: 20px; gap: 12px; grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#login-page .login-request-access b { font-size: 13px; }
#login-page .login-request-access small { color: var(--muted); font-size: 12px; }
#login-page .login-request-access button { justify-self: start; min-height: 44px; padding: 10px 14px; font-size: 14px; font-weight: 600; border: 1px solid var(--k-palette-line); border-radius: var(--k-radius-control); background: var(--paper); color: var(--green-deep); box-shadow: none; }
#login-page .login-request-access button:hover { background: var(--k-palette-state-soft); }
#login-page .login-legal-row { text-transform: none; letter-spacing: 0; font-weight: 500; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; padding: 0; border: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#login-page .login-data-link { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; text-underline-offset: 3px; }
#login-page .login-method-link { min-height: 44px; padding-block: 10px; }
#login-page .login-panel-hint, #login-page .login-method-link { font-size: 12px; line-height: 1.5; }
#login-page :is(button, input, summary, a):focus-visible { outline: 2px solid var(--k-palette-focus-light); outline-offset: 3px; }
@media (max-width: 760px) {
#login-page .login-card { grid-template-columns: minmax(0, 1fr); width: min(520px, 100%); }
#login-page .login-brand-panel { gap: 22px; padding: 28px; }
#login-page .login-brand-panel::after { background-position: right 8px center; background-size: 160px auto; opacity: .45; }
#login-page .login-title { max-width: none; font-size: 32px; }
#login-page .login-brand-foot { display: none; }
#login-page .login-lead { max-width: 32ch; }
#login-page .login-access-panel { padding: 28px; }
}
@media (max-width: 1020px) {
.trust-page .trust-layout {
grid-template-columns: minmax(0, 1fr);
gap: 34px;
}
.trust-page .trust-aside {
position: static;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 32px;
align-items: start;
}
.trust-page .trust-transparency {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.trust-page .trust-tech {
grid-column: 1 / -1;
}
}
@media (max-width: 860px) {
.settings-page-workspace {
gap: 16px;
}
.settings-page-workspace[data-settings-workspace="organization"] {
gap: 11px;
}
.settings-page-workspace[data-settings-workspace="organization"] .settings-page-scope-badge {
margin-top: 0;
}
.settings-page-workspace .settings-page-heading,
.settings-page-workspace[data-settings-workspace="organization"] .settings-page-heading {
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
padding-bottom: 13px;
}
.settings-page-workspace[data-settings-workspace="organization"] .settings-page-heading {
align-items: start;
padding: 1px;
padding-bottom: 13px;
}
.settings-page-workspace[data-settings-workspace="organization"] .settings-page-heading h1 {
font-size: 28px;
}
.settings-page-workspace[data-settings-workspace="organization"] .settings-panel-access {
grid-column: 2;
justify-self: start;
}
.settings-page-workspace .settings-page-heading .btn,
.settings-page-workspace[data-settings-workspace="organization"] .settings-page-heading .btn {
grid-column: 1 / -1;
justify-self: start;
}
.settings-page-workspace > .settings-modal-layout,
.settings-page-workspace[data-settings-workspace="organization"] > .settings-modal-layout {
display: block;
min-height: 0;
overflow: visible;
}
.settings-page-workspace .settings-tabs,
.settings-page-workspace[data-settings-workspace="organization"] .settings-tabs,
.settings-page-workspace[data-settings-workspace="personal"] .settings-tabs {
position: sticky;
top: calc(50px + env(safe-area-inset-top, 0px));
z-index: 9;
display: flex;
align-items: stretch;
gap: 0;
width: 100%;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
border: 0;
border-top: 1px solid rgba(47, 85, 69, .2);
border-bottom: 1px solid rgba(47, 85, 69, .2);
border-radius: 0;
background: rgba(251, 248, 240, .98);
box-shadow: none;
backdrop-filter: none;
scrollbar-width: none;
}
.settings-page-workspace .settings-tabs-heading,
.settings-page-workspace[data-settings-workspace="organization"] .settings-tabs-heading {
display: none;
}
.settings-page-workspace .settings-tab,
.settings-page-workspace[data-settings-workspace="organization"] .settings-tab,
.settings-page-workspace[data-settings-workspace="personal"] .settings-tab {
flex: 1 0 auto;
grid-template-columns: 22px auto;
gap: 6px;
width: auto;
min-width: 118px;
min-height: 52px;
padding: 7px 9px;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--muted);
text-align: left;
}
.settings-page-workspace .settings-tab:hover,
.settings-page-workspace[data-settings-workspace="organization"] .settings-tab:hover,
.settings-page-workspace[data-settings-workspace="personal"] .settings-tab:hover {
border-color: var(--sage);
background: rgba(47, 85, 69, .035);
}
.settings-page-workspace .settings-tab.is-active,
.settings-page-workspace[data-settings-workspace="organization"] .settings-tab.is-active,
.settings-page-workspace[data-settings-workspace="personal"] .settings-tab.is-active {
border-color: var(--coral);
background: transparent;
color: var(--green-deep);
}
.settings-page-workspace .settings-tab-copy b,
.settings-page-workspace[data-settings-workspace="personal"] .settings-tab-copy b {
font-size: 11.5px;
line-height: 1.2;
white-space: normal;
}
.settings-page-workspace .settings-tab-copy small,
.settings-page-workspace .settings-tab-arrow,
.settings-page-workspace[data-settings-workspace="personal"] .settings-tab-copy small,
.settings-page-workspace[data-settings-workspace="personal"] .settings-tab-arrow {
display: none;
}
.settings-page-workspace .settings-panels,
.settings-page-workspace[data-settings-workspace="organization"] .settings-panels,
.settings-page-workspace[data-settings-workspace="personal"] .settings-panels {
display: block;
width: 100%;
padding: 22px 0 0;
overflow: visible;
}
.settings-page-workspace .settings-panel,
.settings-page-workspace[data-settings-workspace="personal"] .settings-panel {
gap: 0;
}
.settings-page-workspace .settings-panel > .settings-panel-hero,
.settings-page-workspace[data-settings-workspace="personal"] .settings-panel > .settings-panel-hero {
display: grid;
}
.settings-page-workspace .settings-management-section {
grid-template-columns: minmax(0, 1fr);
gap: 15px;
}
.settings-page-workspace .settings-management-section-head {
grid-template-columns: 28px minmax(0, 1fr);
}
.settings-page-workspace .settings-drive-admin-card .settings-text-row {
grid-template-columns: minmax(0, 1fr);
}
.settings-page-workspace > .settings-page-foot,
.settings-page-workspace[data-settings-workspace="personal"] > .settings-page-foot,
.settings-page-workspace[data-settings-workspace="personal"] > .settings-page-foot:has(.settings-save-btn:disabled),
.settings-page-workspace[data-settings-workspace="personal"] > .settings-page-foot:has(.settings-save-btn:not(:disabled)) {
position: sticky;
bottom: calc(70px + env(safe-area-inset-bottom, 0px));
display: flex;
width: 100%;
min-height: 58px;
padding: 7px 0;
border-radius: 0;
background: rgba(251, 248, 240, .98);
box-shadow: none;
}
.settings-page-workspace > .settings-page-foot .settings-save-btn {
width: 100%;
}
.trust-page .trust-crisis-head {
display: grid;
gap: 8px;
}
.trust-page .trust-crisis-grid {
grid-template-columns: minmax(0, 1fr);
}
.trust-page .trust-crisis-card,
.trust-page .trust-crisis-card.urgent {
border-left: 0;
border-top: 1px solid rgba(47, 85, 69, .12);
padding-block: 14px;
}
.trust-page .trust-crisis-card:first-child {
border-top: 0;
}
.trust-page .trust-layout {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
.trust-page .trust-aside {
position: static;
}
}
@media (max-width: 560px) {
.settings-page-workspace .settings-page-heading,
.settings-page-workspace[data-settings-workspace="organization"] .settings-page-heading {
grid-template-columns: minmax(0, 1fr);
}
.settings-page-workspace .settings-page-scope-badge,
.settings-page-workspace[data-settings-workspace="organization"] .settings-page-scope-badge {
justify-self: start;
margin: 0;
}
.settings-page-workspace .settings-chapter-heading,
.settings-page-workspace .settings-panel-hero,
.settings-page-workspace .settings-workspace-section-heading {
grid-template-columns: 32px minmax(0, 1fr);
gap: 10px;
}
.settings-page-workspace .settings-panel-access {
grid-column: 2;
justify-self: start;
}
.settings-page-workspace .settings-account-card {
grid-template-columns: minmax(0, 1fr);
}
.settings-page-workspace .settings-account-actions {
justify-content: stretch;
}
.settings-page-workspace .settings-account-actions .small-btn {
flex: 1 1 0;
}
.settings-page-workspace .settings-row,
.settings-page-workspace .settings-select-row,
.settings-page-workspace .settings-text-row,
.settings-page-workspace .settings-row-action {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.settings-page-workspace .settings-row .settings-toggle {
justify-self: start;
}
.settings-page-workspace .settings-row-btn,
.settings-page-workspace :is(.settings-select, .settings-text-input) {
width: 100%;
}
.settings-page-workspace .settings-management-danger {
padding: 20px 13px;
}
.trust-page .trust-hero,
.trust-page .trust-heading {
grid-template-columns: 34px minmax(0, 1fr);
gap: 10px;
}
.trust-page .trust-hero-icon {
width: 32px;
height: 32px;
}
.trust-page .trust-hero h1 {
font-size: clamp(28px, 7.8vw, 31px);
line-height: 1.04;
}
.trust-page .trust-hero p:last-child {
grid-column: 1 / -1;
}
.trust-page .trust-aside {
grid-template-columns: minmax(0, 1fr);
}
.trust-page .trust-transparency {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid rgba(47, 85, 69, .16);
}
.trust-page .trust-tech {
grid-column: auto;
}
.trust-page .trust-crisis-card,
.trust-page .trust-crisis-card.urgent {
padding-inline: 0;
}
.trust-page .trust-crisis {
padding: 20px 16px 18px;
}
.trust-page .trust-form-intro,
.trust-page .trust-submit-row {
display: grid;
gap: 13px;
}
.trust-page .trust-lock-badge {
justify-self: start;
padding-left: 0;
border-left: 0;
}
.trust-page .trust-mode-grid {
grid-template-columns: minmax(0, 1fr);
}
.trust-page .trust-submit {
width: 100%;
}
#login-page.login-page { place-items: start center; padding: max(16px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
#login-page .login-card { padding: 0 !important; }
#login-page .login-brand-panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 22px; }
#login-page .login-brand-mast { gap: 10px; }
#login-page .login-logo { width: 44px; height: 44px; }
#login-page .entry-brand-mark { width: 44px; height: 44px; }
#login-page .login-title { margin: 0 0 10px; font-size: 30px !important; line-height: 1.12; }
#login-page .login-lead { display: block; font-size: 13px; line-height: 1.55; }
#login-page .login-access-panel { padding: 26px 22px; }
#login-page .login-access-head { margin-bottom: 22px; }
#login-page .login-access-head h2 { font-size: 26px; }
#login-page .login-preferred-label { flex-wrap: wrap; }
#login-page .login-preferred-label small { text-align: left; }
#login-page .login-password-form { display: grid; gap: 9px; }
#login-page .login-email-row { grid-template-columns: minmax(0, 1fr); }
#login-page .login-email-row .btn { width: 100%; }
}
#modal-root .modal.direct-e2ee-modal {
overflow: hidden;
border: 1px solid var(--k-palette-line, rgba(47, 85, 69, .18));
border-radius: var(--k-radius-control);
background: var(--k-palette-paper, #fffcf5);
box-shadow: none;
}
#modal-root .modal.direct-e2ee-modal > .modal-head {
min-height: 68px;
padding: 15px 18px 15px 22px;
border-bottom: 1px solid var(--k-palette-line, rgba(47, 85, 69, .18));
background: var(--k-palette-paper, #fffcf5);
}
#modal-root .modal.direct-e2ee-modal > .modal-head::before {
width: 3px;
height: 36px;
border-radius: 0;
background: var(--k-palette-brand, var(--coral));
box-shadow: none;
}
#modal-root .modal.direct-e2ee-modal > .modal-head h3 {
color: var(--k-palette-ink, var(--ink));
font-size: clamp(22px, 2.2vw, 27px);
}
#modal-root .modal.direct-e2ee-modal > .modal-head .x {
border-radius: var(--k-radius-control);
background: transparent;
box-shadow: none;
}
#modal-root .modal.direct-e2ee-modal > .modal-body {
min-width: 0;
padding: 20px 24px;
background: var(--k-palette-paper, #fffcf5);
}
#modal-root .modal.direct-e2ee-modal > .modal-foot {
flex-wrap: wrap;
padding: 13px 24px !important;
background: var(--k-palette-paper-muted, #f1ebdd);
box-shadow: none;
}
#modal-root .modal.direct-e2ee-modal > .modal-foot .btn {
min-width: 0;
max-width: 100%;
border-radius: var(--k-radius-control);
white-space: normal;
overflow-wrap: anywhere;
}
.direct-e2ee-pairing-host .confirm-modal-overlay {
padding: 12px;
background: rgba(48, 42, 34, .68);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.direct-e2ee-pairing-host .direct-e2ee-pairing-modal {
display: flex;
flex-direction: column;
width: min(540px, calc(100vw - 24px));
max-width: 540px;
max-height: calc(100dvh - 24px);
overflow: hidden;
border: 1px solid var(--k-palette-line, rgba(47, 85, 69, .18));
border-radius: var(--k-radius-control);
background: var(--k-palette-paper, #fffcf5);
box-shadow: none;
}
.direct-e2ee-pairing-host .direct-e2ee-pairing-modal > .modal-head {
min-height: 68px;
padding: 18px 24px 14px;
border-bottom: 3px solid var(--k-palette-brand, var(--coral));
background: transparent;
}
.direct-e2ee-pairing-host .direct-e2ee-pairing-modal > .modal-head h3 {
color: var(--k-palette-ink, var(--ink));
font-size: clamp(22px, 5vw, 27px);
}
.direct-e2ee-pairing-host .direct-e2ee-pairing-modal > .modal-body {
flex: 1 1 auto;
min-height: 0;
padding: 18px 24px 22px;
overflow-x: hidden;
overflow-y: auto;
background: transparent;
}
.direct-e2ee-pairing-host .direct-e2ee-pairing-modal > .modal-foot {
gap: 10px;
padding: 14px 24px !important;
border-top: 1px solid var(--k-palette-line, rgba(47, 85, 69, .18));
background: var(--k-palette-paper-muted, #f1ebdd);
}
.direct-e2ee-pairing-host .direct-e2ee-pairing-modal > .modal-foot .btn {
min-width: 0;
min-height: 44px;
border-radius: var(--k-radius-control);
box-shadow: none;
}
@media (max-width: 700px) {
#modal-root .modal.direct-e2ee-modal {
border-radius: 2px 2px 0 0;
}
#modal-root .modal.direct-e2ee-modal > .modal-head {
min-height: 64px;
padding: 11px 12px 11px 16px;
}
#modal-root .modal.direct-e2ee-modal > .modal-body {
padding: 16px;
overflow-x: hidden;
}
#modal-root .modal.direct-e2ee-modal > .modal-foot {
padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px)) !important;
}
.direct-e2ee-pairing-host .confirm-modal-overlay {
align-items: flex-end;
padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px));
}
.direct-e2ee-pairing-host .direct-e2ee-pairing-modal {
width: 100%;
max-width: none;
max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
border-radius: var(--k-radius-control);
}
.direct-e2ee-pairing-host .direct-e2ee-pairing-modal > .modal-head {
min-height: 62px;
padding: 15px 16px 12px;
}
.direct-e2ee-pairing-host .direct-e2ee-pairing-modal > .modal-body {
padding: 15px 16px 18px;
}
.direct-e2ee-pairing-host .direct-e2ee-pairing-modal > .modal-foot {
padding: 12px 16px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.settings-page-workspace :is(button, input, select),
.trust-page :is(button, a, input, select, textarea, summary),
#login-page :is(button, input, summary),
.direct-e2ee-modal :is(button, input, textarea, summary),
.direct-e2ee-pairing-modal :is(button, input, textarea, summary) {
transition-duration: .01ms !important;
}
}
[data-jilemnice-game][hidden] { display: none !important; }
.app-shell.k-shell-working-print .jilemnice-game-trigger {
border: 1px dashed rgba(207, 103, 76, .34);
background: rgba(207, 103, 76, .06);
}
body.jilemnice-game-open { overflow: hidden; }
.jilemnice-game-screen[hidden] { display: none !important; }
.jilemnice-game-screen {
--game-ink: #26342e;
--game-muted: #66716c;
--game-line: #d3cec4;
--game-paper: #fcfaf4;
--game-green: #2d5b48;
--game-coral: #c45f48;
position: fixed;
inset: 0;
z-index: 12000;
display: grid;
grid-template-rows: 54px minmax(0, 1fr);
width: 100vw;
height: 100vh;
height: 100dvh;
color: var(--game-ink);
background: #e8e4db;
overflow: hidden;
}
.jilemnice-game-screen-bar {
position: relative;
z-index: 12;
display: flex;
align-items: center;
justify-content: space-between;
min-width: 0;
padding: 7px max(18px, env(safe-area-inset-right, 0px)) 7px max(18px, env(safe-area-inset-left, 0px));
border-bottom: 1px solid #0f3024;
background: #163a2c;
}
.jilemnice-game-screen-bar > div { display: flex; align-items: baseline; gap: 11px; min-width: 0; }
.jilemnice-game-screen-bar span { color: #fffaf2; font-size: 17px; font-weight: 820; line-height: 1; }
.jilemnice-game-screen-bar b { overflow: hidden; color: rgba(255, 250, 240, .58); font-size: 8px; letter-spacing: .15em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.jilemnice-game-screen-bar button { min-height: 38px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 7px; color: #fffaf2; background: transparent; font-size: 13px; font-weight: 780; }
.jilemnice-game-screen-bar button:hover { border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .07); }
.jilemnice-game-screen-bar button:focus-visible { border-color: #f2b7a7; outline: 2px solid #f2b7a7; outline-offset: 1px; }
.jilemnice-game-screen-body { min-width: 0; min-height: 0; overflow: hidden; }
.jilemnice-game-screen-body > .jilemnice-game { width: 100%; height: 100%; }
.jilemnice-game {
display: grid;
grid-template-rows: auto 46px minmax(0, 1fr);
min-height: 0;
color: var(--game-ink);
background: #e8e4db;
}
.jilemnice-intro {
display: grid;
grid-template-columns: minmax(235px, .8fr) minmax(340px, 1.3fr) minmax(190px, .58fr);
gap: 26px;
align-items: center;
min-height: 70px;
padding: 9px 22px;
border-bottom: 1px solid var(--game-line);
color: var(--game-ink);
background: var(--game-paper);
}
.jilemnice-intro span { display: block; margin-bottom: 4px; color: var(--game-coral); font-size: 8px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.jilemnice-intro h3 { margin: 0; color: #234739; font-size: clamp(24px, 2.25vw, 30px); font-weight: 820; line-height: 1; letter-spacing: -.03em; }
.jilemnice-intro p { margin: 0; color: #505d57; font-size: 11px; line-height: 1.46; }
.jilemnice-intro > small { padding-left: 16px; border-left: 1px solid var(--game-line); color: #747d78; font-size: 8.5px; line-height: 1.45; }
.jilemnice-action-strip {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
padding: 8px 22px;
border-bottom: 1px solid #cbd4ce;
color: #314d41;
background: #edf2ed;
}
.jilemnice-action-strip > span { flex: 0 0 auto; color: #5a7067; font-size: 8px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.jilemnice-action-strip > b,
.jilemnice-action-strip > strong { flex: 0 0 auto; color: #214638; font-size: 14px; font-weight: 820; line-height: 1.1; }
.jilemnice-action-strip > i { color: #7c8882; font-size: 10px; font-style: normal; }
.jilemnice-action-strip > em { flex: 0 0 auto; padding: 4px 8px; border: 1px solid #d9aea2; border-radius: 5px; color: #873e2d; background: #fae9e3; font-size: 9px; font-style: normal; font-weight: 820; }
.jilemnice-action-strip > small { min-width: 0; margin-left: auto; overflow: hidden; color: #6b7872; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.jilemnice-action-strip.is-busy > span::before { content: "●"; margin-right: 6px; color: var(--game-coral); }
.jilemnice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 252px; min-height: 0; height: 100%; }
.jilemnice-layout > main { position: relative; display: grid; grid-template-rows: minmax(300px, 1fr) 194px; min-width: 0; min-height: 0; background: #e5e0d6; }
.jilemnice-tabletop {
position: relative;
min-height: 0;
margin: 14px 18px 12px;
overflow: hidden;
border: 8px solid #c6c0b5;
border-radius: 46% / 18%;
outline: 1px solid #9a9a91;
background: #697a72;
}
.jilemnice-tabletop::after {
content: "";
position: absolute;
inset: 6px;
z-index: 0;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 46% / 16%;
pointer-events: none;
}
.jilemnice-seat {
position: absolute;
z-index: 2;
display: block;
width: 156px;
min-height: 132px;
padding: 0;
border: 0;
border-radius: 0;
color: var(--game-ink);
background: transparent;
text-align: center;
transform: translate(-50%, -50%);
}
.jilemnice-seat.seat-0 { left: 50%; top: 21%; }
.jilemnice-seat.seat-1 { left: 14%; top: 44%; }
.jilemnice-seat.seat-2,
.jilemnice-seat.is-you { left: 27%; top: 77%; }
.jilemnice-seat.seat-3 { left: 86%; top: 44%; }
.jilemnice-seat.seat-4 { left: 73%; top: 77%; }
.jilemnice-seat.is-out { opacity: .4; filter: grayscale(.75); }
.jilemnice-seat:focus-visible { outline: 3px solid rgba(255, 255, 255, .92); outline-offset: 5px; }
.jilemnice-role-card {
position: absolute;
left: 2px;
top: 18px;
z-index: 1;
display: grid;
grid-template-rows: auto 1fr;
place-items: center;
width: 52px;
height: 75px;
margin: 0;
padding: 7px 4px;
border: 1px solid #c9c1b3;
border-top: 4px solid #a88761;
border-radius: 7px;
color: #564f44;
background: #f8f3e7;
text-align: center;
transform: none;
}
.jilemnice-role-card > small { color: #83796c; font-size: 5.5px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.jilemnice-role-card > b { overflow-wrap: anywhere; font-size: 8.5px; font-weight: 820; line-height: 1.1; }
.jilemnice-role-card.is-secret { border-color: #304c40; color: #f0f3ef; background: #304c40; }
.jilemnice-role-card.is-secret > small { color: rgba(238, 242, 237, .66); }
.jilemnice-character-card {
position: absolute;
right: 2px;
top: 0;
z-index: 2;
display: grid;
grid-template-rows: 49px auto auto auto auto;
width: 94px;
height: 126px;
padding: 6px;
overflow: hidden;
border: 1px solid #c8c0b3;
border-top: 4px solid #365c4d;
border-radius: 8px;
color: #2d332f;
background: #fbf7ed;
transform: none;
}
.jilemnice-seat.is-you .jilemnice-character-card { border-color: #bd5c46; border-top-color: #bd5c46; background: #fff8f1; }
.jilemnice-portrait {
display: grid;
place-items: center;
width: auto;
height: 47px;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 4px;
color: #fff;
background: #81534a;
font-size: 21px;
font-weight: 820;
line-height: 1;
}
.jilemnice-portrait.side-radnice { background: #315b4a; }
.jilemnice-portrait.side-opozice { background: #84554c; }
.jilemnice-portrait.side-prebehlik { background: #9b6845; }
.jilemnice-character-card > b { align-self: center; min-width: 0; overflow: hidden; padding-top: 3px; font-size: 11px; font-weight: 820; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.jilemnice-ability { display: block; min-width: 0; padding: 1px; overflow: hidden; color: #56625b; font-size: 5.8px; font-weight: 820; line-height: 1.1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.jilemnice-ability > small { display: none; }
.jilemnice-life { display: flex; justify-content: center; align-self: center; gap: 1px; color: #d0cbc1; font-size: 9px; }
.jilemnice-life i { font-style: normal; }
.jilemnice-life .is-live { color: #b54c3d; }
.jilemnice-character-card > small { display: block; overflow: hidden; padding-top: 2px; color: #69756f; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.jilemnice-seat-state {
position: absolute; left: 50%; top: -13px; z-index: 5;
min-width: 42px; padding: 4px 8px; border: 1px solid #d7e5de; border-radius: 5px;
color: #fff; background: #315f4d; font-size: 8px; font-weight: 850; line-height: 1; letter-spacing: .08em;
text-align: center; text-transform: uppercase; transform: translateX(-50%);
}
.jilemnice-seat.is-selected:not(.is-you),
.jilemnice-seat.is-active-turn,
.jilemnice-seat.is-action-target:not(.is-active-turn) { outline: 0; }
.jilemnice-seat.is-selected:not(.is-you) .jilemnice-character-card { border-color: #df806a; outline: 3px solid rgba(255, 244, 238, .82); outline-offset: 2px; }
.jilemnice-seat.is-active-turn { z-index: 5; }
.jilemnice-seat.is-active-turn .jilemnice-character-card {
border-color: #76aa92;
outline: 3px solid rgba(232, 244, 237, .9);
outline-offset: 2px;
animation: jilemnice-active-seat 1.6s ease-in-out infinite;
}
.jilemnice-seat.is-action-target:not(.is-active-turn) { z-index: 4; }
.jilemnice-seat.is-action-target:not(.is-active-turn) .jilemnice-character-card { border-color: #d66f58; outline: 3px solid rgba(255, 235, 228, .84); outline-offset: 2px; }
.jilemnice-seat.is-action-target .jilemnice-seat-state { border-color: #f4b6a7; background: #a94d39; }
.jilemnice-equipment {
position: absolute;
left: 50%;
top: 132px;
z-index: 3;
display: grid;
gap: 2px;
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
color: #43534b;
background: transparent;
pointer-events: none;
transform: translateX(-50%);
}
.jilemnice-equipment > small { display: table; margin: 0 auto 2px; padding: 2px 4px; border-radius: 3px; color: #46564e; background: #f5f1e8; font-size: 5px; font-weight: 820; letter-spacing: .13em; text-transform: uppercase; }
.jilemnice-equipment-cards { display: flex; justify-content: center; min-height: 43px; }
.jilemnice-equipment-cards > em { align-self: center; color: #8c948f; font-size: 15px; font-style: normal; line-height: 1; }
.jilemnice-equipment.is-empty { visibility: hidden; }
.jilemnice-seat.seat-0 .jilemnice-equipment { left: calc(50% + 88px); top: 40px; transform: none; }
.jilemnice-seat.seat-2 .jilemnice-equipment,
.jilemnice-seat.is-you .jilemnice-equipment { left: auto; right: calc(50% + 72px); top: 40px; bottom: auto; transform: none; }
.jilemnice-seat.seat-4 .jilemnice-equipment { left: calc(50% + 72px); top: 40px; bottom: auto; transform: none; }
.jilemnice-seat.seat-1 .jilemnice-equipment { left: 100%; top: 38px; transform: none; }
.jilemnice-seat.seat-3 .jilemnice-equipment { left: auto; right: 100%; top: 38px; transform: none; }
.jilemnice-equipment-cards > i {
flex: 0 0 32px;
display: grid;
grid-template-rows: 21px 1fr;
width: 32px;
height: 43px;
padding: 3px 2px;
overflow: hidden;
border: 1px solid #d7e0dc;
border-radius: 4px;
color: #f8faf9;
background: #506873;
font-style: normal;
text-align: center;
}
.jilemnice-equipment-cards > i + i { margin-left: -7px; }
.jilemnice-equipment-cards > i.kind-jail { background: #795b56; }
.jilemnice-equipment-cards > i.kind-dynamite { background: #984b3b; }
.jilemnice-equipment-cards > i > b { font-size: 12px; font-weight: 850; line-height: 1; }
.jilemnice-equipment-cards > i > span { overflow: hidden; font-size: 5px; font-weight: 820; line-height: 1.05; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.jilemnice-piles {
position: absolute;
left: 50%;
top: 51%;
z-index: 3;
display: flex;
align-items: center;
gap: 16px;
transform: translate(-50%, -50%);
}
.jilemnice-pile-card {
display: grid;
grid-template-rows: 1fr auto auto;
place-items: center;
width: 76px;
height: 108px;
padding: 7px;
border: 1px solid #cec7ba;
border-bottom: 4px solid #a9a195;
border-radius: 8px;
color: #eef4f0;
background: #294c3e;
transform: none;
}
.jilemnice-pile-card.is-discard { border-top: 4px solid #b86652; color: #38443e; background: #faf5e9; }
.jilemnice-pile-card > b { max-width: 100%; overflow: hidden; font-size: 9.5px; font-weight: 820; line-height: 1.08; text-align: center; text-overflow: ellipsis; }
.jilemnice-pile-card > small { color: inherit; font-size: 6.5px; letter-spacing: .04em; opacity: .72; text-transform: uppercase; }
.jilemnice-pile-seal,
.jilemnice-pile-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; font-size: 17px; font-weight: 820; line-height: 1; }
.jilemnice-discard-pile { padding: 0; border: 0; background: transparent; }
.jilemnice-discard-pile:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.jilemnice-discard-pile.wants-card .jilemnice-pile-card { border-color: #e98c74; outline: 4px solid rgba(255, 240, 235, .76); outline-offset: 2px; }
.jilemnice-discard-history {
position: absolute;
left: 50%;
top: calc(100% + 8px);
z-index: 8;
display: grid;
gap: 3px;
width: 176px;
padding: 10px;
border: 1px solid #d8d2c6;
border-radius: 8px;
color: #3f4a45;
background: #fffdf8;
transform: translateX(-25%);
}
.jilemnice-discard-history b { margin-bottom: 3px; font-size: 10px; font-weight: 820; }
.jilemnice-discard-history span { padding-top: 3px; border-top: 1px solid #ebe7df; font-size: 8px; }
.jilemnice-hand-wrap {
position: relative;
min-height: 0;
padding: 7px 20px 2px;
border-top: 1px solid #cbc5ba;
background: #f8f5ed;
}
.jilemnice-turn { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 31px; margin: 0; padding-right: 140px; }
.jilemnice-turn b { color: #283a32; font-size: 17px; font-weight: 820; }
.jilemnice-turn span { color: #6c7771; font-size: 10px; font-weight: 720; }
.jilemnice-hand { display: flex; justify-content: center; align-items: flex-end; height: 154px; min-height: 154px; padding: 0 70px; overflow-x: auto; overflow-y: hidden; }
.jilemnice-hand > p { margin: auto; color: #737d77; font-size: 11px; }
.jilemnice-game-screen .jilemnice-card {
position: relative; --card-accent: #985847;
flex: 0 0 120px;
flex-basis: 120px;
display: grid;
grid-template: 18px 47px auto 10px minmax(26px, auto) / 1fr;
gap: 3px;
height: 150px;
min-height: 150px;
margin-left: -7px;
padding: 6px;
overflow: hidden;
border: 1px solid #c8beaa;
border-top: 4px solid var(--card-accent);
border-radius: 7px;
color: #30352f;
background: #fffaf0;
text-align: center;
transform: translateY(4px);
transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.jilemnice-game-screen .jilemnice-card:first-child { margin-left: 0; }
.jilemnice-game-screen .jilemnice-card:hover:not(:disabled),
.jilemnice-game-screen .jilemnice-card:focus-visible,
.jilemnice-game-screen .jilemnice-card.is-picked { z-index: 4; transform: translateY(-5px); }
.jilemnice-game-screen .jilemnice-card:disabled { opacity: .72; filter: saturate(.66); }
.jilemnice-game-screen .jilemnice-card > .jilemnice-card-top {
position: relative;
z-index: 1;
grid-row: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
width: auto;
height: auto;
border-radius: 0;
color: #68736d;
background: transparent;
font-size: inherit;
}
.jilemnice-card-top > i { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-style: normal; font-weight: 850; line-height: 1; }
.jilemnice-card-top > span { font-size: 6px; font-weight: 820; line-height: 1; letter-spacing: .18em; text-transform: uppercase; }
.jilemnice-game-screen .jilemnice-card > .jilemnice-card-scene {
position: relative;
z-index: 1;
grid-row: 2;
display: grid;
place-items: center;
width: auto;
height: auto;
border: 1px solid #dfd8cc;
border-radius: 4px;
color: var(--card-accent);
background: #f0ece3;
font-size: inherit;
}
.jilemnice-card-scene > i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; font-size: 16px; font-style: normal; font-weight: 820; line-height: 1; }
.jilemnice-card.kind-miss,
.jilemnice-card.kind-heal { --card-accent: #4f7661; }
.jilemnice-card.kind-weapon,
.jilemnice-card.kind-barrel,
.jilemnice-card.kind-distance,
.jilemnice-card.kind-scope,
.jilemnice-card.kind-jail,
.jilemnice-card.kind-dynamite { --card-accent: #536b78; }
.jilemnice-card.kind-panic,
.jilemnice-card.kind-discard { --card-accent: #886f4f; }
.jilemnice-card.kind-gatling,
.jilemnice-card.kind-indians,
.jilemnice-card.kind-duel { --card-accent: #7d5661; }
.jilemnice-card.kind-draw,
.jilemnice-card.kind-store,
.jilemnice-card.kind-saloon { --card-accent: #4f7661; }
.jilemnice-game-screen .jilemnice-card > b,
.jilemnice-card-flight > b { position: relative; z-index: 1; align-self: center; font-size: 11.5px; font-weight: 820; line-height: 1.08; }
.jilemnice-game-screen .jilemnice-card > em,
.jilemnice-card-flight > em { position: relative; z-index: 1; color: #9a5b4d; font-size: 6px; font-style: normal; font-weight: 850; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.jilemnice-game-screen .jilemnice-card > small,
.jilemnice-card-flight > small { position: relative; z-index: 1; min-height: 0; color: #69716b; font-size: 7px; line-height: 1.2; }
.jilemnice-card-value { position: absolute; right: 6px; bottom: 4px; z-index: 2; display: inline-flex; align-items: baseline; gap: 1px; color: #2e332f; font-size: 9px; font-weight: 820; line-height: 1; }
.jilemnice-card-value > b { font: inherit; }
.jilemnice-card-value.suit-hearts,
.jilemnice-card-value.suit-diamonds { color: #a83e35; }
.jilemnice-game-screen .jilemnice-card.is-picked { border-color: #c65f48; background: #fff3eb; outline: 3px solid rgba(198, 95, 72, .24); }
.jilemnice-end-turn,
.jilemnice-outcome button {
min-height: 40px;
padding: 8px 14px;
border: 1px solid #234a3a;
border-radius: 7px;
color: #fff;
background: #2d5b48;
font-weight: 820;
}
.jilemnice-end-turn:hover,
.jilemnice-outcome button:hover { border-color: #173d2e; background: #234b3a; }
.jilemnice-end-turn:focus-visible,
.jilemnice-outcome button:focus-visible { outline: 3px solid rgba(199, 97, 73, .28); outline-offset: 2px; }
.jilemnice-end-turn:disabled { border-color: #b8b2a8; color: #807b73; background: #e7e2d9; opacity: 1; }
.jilemnice-hand-wrap > .jilemnice-end-turn { position: absolute; top: 4px; right: 18px; z-index: 4; }
.jilemnice-log {
min-width: 0;
min-height: 0;
padding: 15px 16px;
overflow: auto;
border-left: 1px solid #cec9bf;
color: #52615a;
background: #fcfaf4;
}
.jilemnice-log > b { color: #42534b; font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.jilemnice-log ol { display: grid; gap: 0; margin: 9px 0 0; padding-left: 19px; color: #616f68; font-size: 10.5px; line-height: 1.48; }
.jilemnice-log li { padding: 8px 0; border-bottom: 1px solid #e8e3da; }
.jilemnice-your-character { display: grid; gap: 5px; margin: 0 0 15px; padding: 10px 11px; border: 1px solid #d4cec3; border-left: 4px solid #315b4a; border-radius: 7px; color: #2f453b; background: #f6f3eb; }
.jilemnice-your-character > b { font-size: 12px; font-weight: 820; line-height: 1.2; }
.jilemnice-your-character > span { font-size: 9px; line-height: 1.38; }
.jilemnice-your-character > small { color: #617069; font-size: 8px; font-weight: 820; text-transform: uppercase; }
.jilemnice-market,
.jilemnice-decision {
position: absolute;
left: 50%;
top: 51%;
z-index: 16;
width: min(660px, calc(100% - 44px));
padding: 14px;
border: 1px solid #d0ccc3;
border-radius: 9px;
color: #34413b;
background: #fffdf8;
transform: translate(-50%, -50%);
}
.jilemnice-market > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.jilemnice-market > header span { color: #2e5545; font-size: 17px; font-weight: 820; line-height: 1; }
.jilemnice-market > header b { color: #77817c; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.jilemnice-market > div { display: flex; justify-content: center; gap: 8px; min-width: 0; overflow-x: auto; }
.jilemnice-market .jilemnice-market-card { flex: 0 0 94px; width: 94px; height: 126px; min-height: 126px; margin: 0; transform: none; }
.jilemnice-market .jilemnice-market-card:hover:not(:disabled),
.jilemnice-market .jilemnice-market-card:focus-visible { transform: translateY(-2px); }
.jilemnice-decision { display: grid; gap: 8px; width: min(430px, calc(100% - 36px)); text-align: left; }
.jilemnice-decision > span { color: #8d6f65; font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.jilemnice-decision > h4 { margin: 0; color: #29483b; font-size: 22px; font-weight: 820; line-height: 1.1; }
.jilemnice-decision > p { margin: 0; color: #65726c; font-size: 11px; line-height: 1.45; }
.jilemnice-decision > div { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 3px; }
.jilemnice-decision button {
min-height: 38px;
padding: 8px 11px;
border: 1px solid #91a69c;
border-radius: 8px;
color: #23463a;
background: #e8f0eb;
font-size: 10px;
font-weight: 820;
}
.jilemnice-decision button:hover,
.jilemnice-decision button:focus-visible { border-color: #587669; background: #dce9e1; outline: 2px solid rgba(72, 111, 94, .2); outline-offset: 2px; }
.jilemnice-decision button.is-danger { border-color: #b45743; color: #fff; background: #ba5943; }
.jilemnice-outcome {
position: absolute;
left: 50%;
top: 50%;
z-index: 18;
width: min(520px, calc(100% - 50px));
margin: 0;
padding: 22px;
border: 1px solid #d0ccc3;
border-radius: 10px;
color: #34413b;
background: #fffdf8;
text-align: center;
transform: translate(-50%, -50%);
}
.jilemnice-outcome span { color: #a34d3a; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.jilemnice-outcome h4 { max-width: 440px; margin: 7px auto 13px; color: #29483b; font-size: 21px; line-height: 1.3; }
.jilemnice-outcome button { margin: 0 auto; }
.jilemnice-card-flight {
position: fixed; --card-accent: #985847;
z-index: 13000;
display: grid;
grid-template: 18px 43px auto 10px minmax(22px, auto) / 1fr;
gap: 3px;
padding: 6px;
overflow: hidden;
border: 1px solid #c8beaa;
border-top: 4px solid var(--card-accent);
border-radius: 7px;
color: #30352f;
background: #fffaf0;
text-align: center;
pointer-events: none;
animation: jilemnice-card-flight 820ms cubic-bezier(.2,.72,.18,1) forwards;
}
@keyframes jilemnice-card-flight {
0% { opacity: .96; transform: translate(0, 0) rotate(-4deg) scale(1); }
58% { opacity: 1; transform: translate(var(--jilemnice-flight-mid-x), var(--jilemnice-flight-mid-y)) rotate(2deg) scale(.94); }
100% { opacity: .86; transform: translate(var(--jilemnice-flight-x), var(--jilemnice-flight-y)) rotate(7deg) scale(.68); }
}
@keyframes jilemnice-active-seat {
0%, 100% { outline-offset: 2px; }
50% { outline-offset: 5px; }
}
@media (max-height: 760px) and (min-width: 901px) {
.jilemnice-intro { min-height: 61px; padding-block: 7px; }
.jilemnice-intro h3 { font-size: 25px; }
.jilemnice-layout > main { grid-template-rows: minmax(276px, 1fr) 184px; }
.jilemnice-tabletop { margin: 10px 14px 9px; }
.jilemnice-game-screen .jilemnice-hand { height: 136px; min-height: 136px; }
.jilemnice-game-screen .jilemnice-card { height: 136px; min-height: 136px; }
}
@media (max-width: 900px) {
.jilemnice-game-screen { grid-template-rows: 52px minmax(0, 1fr); }
.jilemnice-game-screen-bar { padding-block: 5px; }
.jilemnice-game-screen-bar button { min-height: 39px; }
.jilemnice-game-screen-body { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.jilemnice-game-screen-body > .jilemnice-game { height: auto; min-height: 100%; }
.jilemnice-game { display: block; }
.jilemnice-intro { grid-template-columns: 1fr; gap: 7px; min-height: 0; padding: 11px 14px; }
.jilemnice-intro p { font-size: 10px; }
.jilemnice-intro > small { padding: 0; border: 0; }
.jilemnice-action-strip { flex-wrap: wrap; min-height: 57px; padding: 8px 12px; }
.jilemnice-action-strip > small { flex-basis: 100%; margin-left: 0; white-space: normal; }
.jilemnice-layout { display: block; height: auto; }
.jilemnice-layout > main { display: block; }
.jilemnice-tabletop { height: 480px; min-height: 480px; margin: 10px; border-width: 7px; border-radius: 28px; }
.jilemnice-seat { width: 122px; min-height: 108px; }
.jilemnice-seat.seat-0 { top: 17%; }
.jilemnice-seat.seat-1 { left: 15%; top: 41%; }
.jilemnice-seat.seat-2,
.jilemnice-seat.is-you { left: 26%; top: 75%; }
.jilemnice-seat.seat-3 { left: 85%; top: 41%; }
.jilemnice-seat.seat-4 { left: 74%; top: 75%; }
.jilemnice-role-card { top: 12px; width: 44px; height: 63px; padding: 5px 3px; border-top-width: 3px; }
.jilemnice-role-card > b { font-size: 7px; }
.jilemnice-character-card { width: 76px; height: 104px; grid-template-rows: 40px auto auto auto auto; padding: 4px; border-top-width: 3px; }
.jilemnice-portrait { height: 39px; font-size: 18px; }
.jilemnice-character-card > b { font-size: 9px; }
.jilemnice-ability { font-size: 4.8px; }
.jilemnice-life { font-size: 7.5px; }
.jilemnice-character-card > small { font-size: 5px; }
.jilemnice-equipment { top: 109px; min-width: 68px; }
.jilemnice-seat.seat-0 .jilemnice-equipment { left: calc(50% + 58px); top: 33px; }
.jilemnice-seat.seat-2 .jilemnice-equipment,
.jilemnice-seat.is-you .jilemnice-equipment { left: calc(50% + 55px); right: auto; top: 10px; bottom: auto; transform: none; }
.jilemnice-seat.seat-4 .jilemnice-equipment { left: auto; right: calc(50% + 55px); top: 65px; bottom: auto; transform: none; }
.jilemnice-seat.seat-1 .jilemnice-equipment,
.jilemnice-seat.seat-3 .jilemnice-equipment { left: 50%; right: auto; top: -42px; transform: translateX(-50%); }
.jilemnice-equipment-cards { min-height: 35px; }
.jilemnice-equipment-cards > i { flex-basis: 25px; width: 25px; height: 34px; grid-template-rows: 16px 1fr; }
.jilemnice-equipment-cards > i + i { margin-left: -7px; }
.jilemnice-pile-card { width: 62px; height: 88px; border-bottom-width: 3px; }
.jilemnice-piles { top: 53%; gap: 10px; }
.jilemnice-discard-history { left: auto; right: 0; transform: none; }
.jilemnice-hand-wrap { min-height: 210px; padding-inline: 10px; }
.jilemnice-turn { padding-right: 126px; }
.jilemnice-turn b { font-size: 17px; }
.jilemnice-turn span { display: block; padding-top: 2px; font-size: 9px; }
.jilemnice-hand { justify-content: flex-start; height: 166px; min-height: 166px; padding-inline: 18px; }
.jilemnice-game-screen .jilemnice-card { flex-basis: 112px; height: 152px; min-height: 152px; }
.jilemnice-log { max-height: 230px; overflow: auto; border-top: 1px solid #d2cec5; border-left: 0; }
}
@media (max-width: 820px) { .jilemnice-tabletop { border-radius: 26px; } }
@media (max-width: 430px) {
.jilemnice-game-screen-bar > div { gap: 7px; }
.jilemnice-game-screen-bar span { font-size: 16px; }
.jilemnice-game-screen-bar b { font-size: 7px; }
.jilemnice-game-screen-bar button { padding-inline: 10px; }
.jilemnice-intro h3 { font-size: 24px; }
.jilemnice-action-strip > span { flex-basis: 100%; }
.jilemnice-action-strip > b, .jilemnice-action-strip > strong { font-size: 12px; }
.jilemnice-tabletop { height: 470px; min-height: 470px; margin: 7px; border-width: 6px; border-radius: 22px; }
.jilemnice-seat { width: 118px; }
.jilemnice-seat.seat-1 { left: 19%; }
.jilemnice-seat.seat-2,
.jilemnice-seat.is-you { left: 24%; }
.jilemnice-seat.seat-3 { left: 84%; }
.jilemnice-seat.seat-4 { left: 76%; }
.jilemnice-role-card { width: 41px; }
.jilemnice-character-card { width: 70px; }
.jilemnice-equipment { gap: 1px; }
.jilemnice-equipment-cards > i { flex-basis: 29px; width: 29px; }
.jilemnice-market { width: calc(100% - 18px); padding: 9px; }
.jilemnice-market > div { justify-content: flex-start; }
.jilemnice-market .jilemnice-market-card { flex-basis: 86px; width: 86px; }
.jilemnice-decision { top: 52%; width: calc(100% - 18px); padding: 12px; }
.jilemnice-decision > h4 { font-size: 19px; }
.jilemnice-decision > div { display: grid; }
}
@media (max-width: 350px) {
.jilemnice-tabletop { height: 540px; min-height: 540px; }
.jilemnice-seat.seat-0 { top: 14%; }
.jilemnice-seat.seat-1 { left: 20%; top: 35%; }
.jilemnice-seat.seat-3 { left: 80%; top: 35%; }
.jilemnice-seat.seat-2, .jilemnice-seat.is-you { left: 25%; top: 80%; }
.jilemnice-seat.seat-4 { left: 75%; top: 80%; }
.jilemnice-piles { top: 55%; }
}
@media (prefers-reduced-motion: reduce) { .jilemnice-seat.is-active-turn .jilemnice-character-card, .jilemnice-card-flight { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
.settings-page-workspace[data-settings-workspace="organization"] :is(.settings-tab-index,.settings-chapter-mark) { display: none; }
.settings-page-workspace[data-settings-workspace="organization"] :is(.settings-chapter-heading,.settings-panel-hero,.settings-workspace-section-heading) { grid-template-columns: minmax(0,1fr) auto; border: 0; }
.settings-page-workspace[data-settings-workspace="organization"] .settings-panel-access { grid-column: auto; }
.settings-page-workspace[data-settings-workspace="organization"] .settings-tab { grid-template-columns: minmax(0,1fr) 18px; }
.settings-page-workspace[data-settings-workspace="organization"] .settings-tab.is-active { border-color: var(--k-palette-structure); background: var(--k-palette-state-soft); }
.settings-page-workspace .settings-panel-kicker { color: var(--k-palette-text-soft); }