/* Tasks and Clients */
.wk-count { color: var(--ink-soft); font-weight: 400; }
.wk-mine { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.wk-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.wk-col { padding: 14px; border-radius: 18px; background: #f6f6f7; }
.wk-col h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.wk-col h2 span { color: var(--ink-soft); font-weight: 400; }
.wk-card { padding: 14px; margin-bottom: 10px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; background: var(--paper); }
.wk-title { margin: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.wk-title.is-done { color: var(--ink-soft); text-decoration: line-through; }
.wk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.wk-who { padding: 3px 10px; border-radius: 999px; background: #f0f0f1; color: var(--ink); }
.wk-who.is-none { color: var(--ink-soft); }
.wk-due.is-late { color: #b3261e; font-weight: 600; }
.wk-ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.wk-ctl select { height: 34px; padding: 0 10px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; }
.wk-link { border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.wk-link:hover { color: var(--accent); }
.wk-empty { margin: 4px 0; font-size: 14px; color: var(--ink-soft); }
.wk-search { width: 100%; height: 44px; margin: 6px 0 14px; padding: 0 16px; border: 1px solid var(--sh-line, var(--line)); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.wk-clients { border-top: 1px solid var(--sh-line, var(--line)); }
.wk-client { border-bottom: 1px solid var(--sh-line, var(--line)); }
.wk-client-top { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 4px; border: 0; background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.wk-client-top:hover .tm-who b { color: var(--accent); }
.wk-st { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #f0f0f1; color: var(--ink-soft); }
.wk-st--active { background: #e6f5ec; color: #1a7f4b; }
.wk-st--lead { background: #fff1de; color: #a3560c; }
.wk-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 4px 20px; }
.wk-edit label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.wk-edit input, .wk-edit select, .wk-edit textarea { padding: 10px 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.wk-wide { grid-column: 1 / -1; }
.wk-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
.wk .tm-form input[type="date"], .wk .tm-form select { flex: 0 1 180px; }
@media (max-width: 900px) { .wk-board { grid-template-columns: 1fr; } .wk-edit { grid-template-columns: 1fr; } }

/* documents */
.dc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dc { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.dc-side { display: grid; gap: 6px; align-content: start; }
.dc-item { display: grid; gap: 2px; width: 100%; padding: 12px 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.dc-item:hover { border-color: var(--accent); }
.dc-item.is-on { background: var(--sh-tint, #fff1e6); border-color: var(--accent); }
.dc-item b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-item small { color: var(--ink-soft); font-size: 12.5px; }
.dc-badge { padding: 1px 8px; border-radius: 999px; background: #fff1de; color: #a3560c; font-weight: 600; }
.dc-main { min-width: 0; }
.dc-title { width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--sh-line, var(--line)); background: none; color: var(--ink); font: inherit; font-size: clamp(24px, 3vw, 34px); font-weight: 450; letter-spacing: -0.03em; outline: none; }
.dc-body { width: 100%; min-height: 52vh; margin-top: 14px; padding: 4px 2px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.65; resize: vertical; outline: none; }
.dc-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--sh-line, var(--line)); }
.dc-foot .wk-mine { margin: 0; }
.dc-saved { flex: 1 1 auto; font-size: 13px; color: var(--ink-soft); }
.dc-read { white-space: pre-wrap; font-size: 16px; line-height: 1.7; color: var(--ink); }
#dcReader h2 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 34px); font-weight: 450; letter-spacing: -0.03em; }
@media (max-width: 900px) { .dc { grid-template-columns: 1fr; } }
.wk-share { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.wk-ctl { flex-wrap: wrap; }

/* invoices */
.iv { max-width: none; }
.iv-set { margin: 0 0 22px; border: 1px solid var(--sh-line, var(--line)); border-radius: 16px; background: var(--paper); }
.iv-set summary { padding: 14px 18px; cursor: pointer; font-weight: 500; list-style: none; }
.iv-set summary::-webkit-details-marker { display: none; }
.iv-set-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 4px 18px 18px; }
.iv-set-form label, .iv-form label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.iv-set-form input, .iv-set-form textarea, .iv-form input, .iv-form textarea, .iv-form select { padding: 10px 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; width: 100%; }
.iv-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.iv-sum div { padding: 16px 18px; border-radius: 14px; background: #f6f6f7; }
.iv-sum small { display: block; font-size: 13px; color: var(--ink-soft); }
.iv-sum b { display: block; margin-top: 4px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; letter-spacing: -0.02em; }
.iv-sum b.is-late { color: #b3261e; }
.iv-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.iv-tab { padding: 8px 16px; border: 1px solid var(--sh-line, var(--line)); border-radius: 999px; background: var(--paper); font: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.iv-tab.is-on { background: #111; border-color: #111; color: #fff; }
.iv-rows { border-top: 1px solid var(--sh-line, var(--line)); }
.iv-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px 100px 130px; align-items: center; gap: 14px; width: 100%; padding: 14px 6px; border: 0; border-bottom: 1px solid var(--sh-line, var(--line)); background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.iv-row:hover { background: #f8f8f8; }
.iv-no { font-weight: 600; }
.iv-cl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-dt { color: var(--ink-soft); font-size: 14px; }
.iv-am { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.iv-st { display: inline-block; justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #f0f0f1; color: var(--ink-soft); }
.iv-st--sent { background: #e8f0ff; color: #1f4fb3; }
.iv-st--paid { background: #e6f5ec; color: #1a7f4b; }
.iv-st--overdue { background: #fde8e6; color: #b3261e; }
.iv-st--void { background: #ececee; color: #6b6b6b; text-decoration: line-through; }
.iv-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.iv-acts { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.iv-grid { display: grid; grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); gap: 24px; align-items: start; }
.iv-form { display: grid; gap: 14px; }
.iv-form fieldset { display: grid; gap: 10px; margin: 0; padding: 14px 16px 16px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; }
.iv-form legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.iv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.iv-it { display: grid; grid-template-columns: minmax(0, 1fr) 64px 92px 92px 24px; gap: 8px; align-items: center; margin-bottom: 8px; }
.iv-it--head { font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.iv-it input { padding: 8px 10px; font-size: 14px; }
.iv-line { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.iv-totals { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.iv-paper { background: #ececee; padding: 24px; border-radius: 16px; overflow-x: auto; }
.iv-sheet { width: 100%; max-width: 760px; min-height: 760px; margin: 0 auto; padding: 48px 52px; background: #fff; color: #111; box-shadow: 0 8px 30px rgba(17, 17, 17, 0.12); font-size: 14px; line-height: 1.5; }
.iv-s-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.iv-s-head h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.iv-s-head p { margin: 0; }
.iv-s-small { font-size: 12.5px; color: #666; margin-top: 4px !important; }
.iv-s-title { text-align: right; }
.iv-s-title h1 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -0.03em; color: #ff7a00; }
.iv-s-title p { margin: 4px 0 0; font-weight: 600; }
.iv-s-meta { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 24px; margin: 34px 0 26px; }
.iv-s-meta small, .iv-s-block small { display: block; margin-bottom: 2px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #888; }
.iv-s-meta p { margin: 0 0 8px; }
.iv-s-stamp span { display: inline-block; padding: 6px 16px; border: 2px solid; border-radius: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(-6deg); }
.iv-s-stamp .is-paid { color: #1a7f4b; } .iv-s-stamp .is-void { color: #888; }
.iv-s-table { width: 100%; border-collapse: collapse; }
.iv-s-table th { padding: 10px 8px; border-bottom: 2px solid #111; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; }
.iv-s-table td { padding: 10px 8px; border-bottom: 1px solid #e5e5e5; vertical-align: top; }
.iv-s-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-s-totals { width: 280px; margin: 18px 0 0 auto; }
.iv-s-totals div { display: flex; justify-content: space-between; padding: 6px 8px; }
.iv-s-grand { margin-top: 6px; border-top: 2px solid #111; font-size: 17px; font-weight: 600; }
.iv-s-block { margin-top: 24px; }
.iv-s-block p { margin: 0; }
body.iv-ro .iv-edit-only { display: none; }
body.iv-ro .iv-grid { grid-template-columns: 1fr; }
@media (max-width: 1400px) { .iv-grid { grid-template-columns: 1fr; } .iv-set-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .iv-row { grid-template-columns: 1fr auto; } .iv-dt, .iv-st { display: none; } .iv-sum { grid-template-columns: 1fr; } .iv-sheet { padding: 28px 20px; } .iv-s-meta { grid-template-columns: 1fr; } .iv-set-form { grid-template-columns: 1fr; } }

.tm [hidden], .iv [hidden], .dc [hidden] { display: none !important; }

/* documents: the toolbar, the page, search, print */
.dc-new { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dc-new select { height: 44px; padding: 0 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14.5px; }
.dc-side .wk-search { margin: 0 0 4px; height: 40px; font-size: 14px; }
.dc-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 4px; }
.dc-tools button { min-width: 36px; height: 34px; padding: 0 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 9px; background: var(--paper); font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.dc-tools button:hover, .dc-tools button[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }
.dc-sp { flex: 1 1 auto; }
.dc-count { font-size: 13px; color: var(--ink-soft); }
.dc-paper { max-width: 780px; padding: 28px 32px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; background: #fff; }
.dc-read h3 { margin: 20px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.dc-read h4 { margin: 16px 0 6px; font-size: 16px; font-weight: 600; }
.dc-read p, .dc-read li { white-space: normal; }
.dc-read ul, .dc-read ol { padding-left: 22px; }
.dc-read blockquote { margin: 12px 0; padding: 4px 16px; border-left: 3px solid var(--accent); color: var(--ink-soft); }
.dc-paper h2 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 32px); font-weight: 450; letter-spacing: -0.03em; }
.dc-reader-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }


/* costs and stock */
.wk-acts { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0; }
.fn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 4px 0 22px; }
.fn-tile { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; background: var(--paper); }
.fn-tile small { color: var(--ink-soft); font-size: 13px; }
.fn-tile b { font-size: 20px; font-weight: 600; }
.fn-tile--wide { grid-column: 1 / -1; }
.fn-tile .is-good { color: #1a7f4b; }
.fn-tile .is-bad { color: #b3261e; }
.fn-group { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 4px; font-size: 15px; font-weight: 600; }
.fn-group span { color: var(--ink-soft); font-weight: 400; font-size: 14px; }
.fn-amt { font-weight: 600; white-space: nowrap; }
.fn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 16px; }
.fn-bar input[type="month"] { height: 40px; padding: 0 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.fn-head, .fn-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); gap: 12px; align-items: center; }
.fn-head { padding: 8px 4px; font-size: 12.5px; color: var(--ink-soft); }
.fn-row > span:not(.tm-who) { font-size: 14px; }
@media (max-width: 760px) { .fn-head { display: none; } .fn-row { grid-template-columns: 1fr 1fr; } .fn-row .tm-who { grid-column: 1 / -1; } }
.fn-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; gap: 10px; }
.fn-low { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #fde8e6; color: #b3261e; font-size: 11.5px; font-weight: 600; vertical-align: middle; }

/* files */
.fl-crumbs { margin: 0 0 14px; font-size: 14px; color: var(--ink-soft); }
.fl-crumbs button { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; }
.fl-crumbs button:hover { color: var(--accent); }
.fl-search { flex: 1 1 220px; max-width: 320px; margin: 0 0 0 auto; height: 40px; }
.fl-drop { border: 1.5px dashed transparent; border-radius: 16px; min-height: 120px; transition: border-color 140ms ease, background 140ms ease; }
.fl-drop.is-over { border-color: var(--accent); background: var(--sh-tint, rgba(255, 122, 0, 0.06)); }
.fl-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--sh-line, var(--line)); }
.fl-main { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-align: left; }
button.fl-main { cursor: pointer; }
button.fl-main:hover b { color: var(--accent); }
.fl-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #f0f0f1; font-size: 20px; flex: none; }
.fl-ic--file { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.fl-ctl { display: flex; flex-wrap: wrap; gap: 14px; flex: none; }
@media (max-width: 600px) { .fl-row { flex-wrap: wrap; } .fl-ctl { width: 100%; justify-content: flex-end; } .fl-search { max-width: none; } }

/* compliance and start-up checklist */
.cp-setup { margin: 0 0 24px; padding: 18px; border: 1px solid var(--sh-line, var(--line)); border-radius: 16px; background: var(--paper); }
.cp-setup h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.cp-note { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.cp-how { padding: 2px 4px 18px; font-size: 14.5px; line-height: 1.55; }
.cp-how p { margin: 0 0 10px; max-width: 70ch; }
.cp-item.is-done .tm-who b { text-decoration: line-through; color: var(--ink-soft); }
.fn-group.is-late { color: #b3261e; }
.su-progress { display: flex; align-items: center; gap: 14px; margin: 4px 0 8px; font-size: 14px; color: var(--ink-soft); }
.su-bar { flex: 1 1 auto; max-width: 420px; height: 8px; border-radius: 999px; background: #eee; overflow: hidden; }
.su-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 240ms ease; }
.su-step { display: flex; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--sh-line, var(--line)); }
.su-tick { flex: none; width: 26px; height: 26px; margin-top: 1px; border: 1.5px solid var(--sh-line, #c9c9cd); border-radius: 8px; background: var(--paper); color: #111; font-size: 15px; line-height: 1; cursor: pointer; }
.su-tick:disabled { cursor: default; }
.su-step.is-done .su-tick { background: var(--accent); border-color: var(--accent); }
.su-step.is-done b { color: var(--ink-soft); text-decoration: line-through; }
.su-body b { font-weight: 500; }
.su-body p { margin: 4px 0 8px; max-width: 70ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

/* quotes and payments */
.iv-new { display: flex; gap: 10px; flex-wrap: wrap; }
.iv-kinds { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 999px; background: #f0f0f1; }
.iv-kinds button { padding: 8px 18px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.iv-kinds button.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.iv-st--accepted { background: #e6f5ec; color: #1a7f4b; }
.iv-st--declined { background: #ececee; color: #6b6b6b; }
.iv-am small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.iv-pay { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--sh-line, var(--line)); border-radius: 16px; background: var(--paper); }
.iv-pay h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.iv-pay-sum { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.iv-pay-row { display: grid; grid-template-columns: 130px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--sh-line, var(--line)); font-size: 14px; }
.iv-pay-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.iv-pay-form input, .iv-pay-form select { height: 40px; padding: 0 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.iv-pay-form input[type="date"] { width: 160px; } .iv-pay-form #ivPayAmt { width: 140px; } .iv-pay-form #ivPayRef { flex: 1 1 160px; }
@media print { .iv-pay, .iv-kinds { display: none !important; } }

/* every on/off choice is a smooth switch */
label.wk-mine { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--ink); cursor: pointer; }
label.wk-mine input[type="checkbox"], .ib-check input[type="checkbox"], .pl-rev-table input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #d4d4d8; cursor: pointer; transition: background 200ms ease; }
label.wk-mine input[type="checkbox"]::after, .ib-check input[type="checkbox"]::after, .pl-rev-table input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 220ms cubic-bezier(0.3, 0.7, 0.2, 1); }
label.wk-mine input[type="checkbox"]:checked, .ib-check input[type="checkbox"]:checked, .pl-rev-table input[type="checkbox"]:checked { background: var(--accent); }
label.wk-mine input[type="checkbox"]:checked::after, .ib-check input[type="checkbox"]:checked::after, .pl-rev-table input[type="checkbox"]:checked::after { transform: translateX(18px); }
label.wk-mine input[type="checkbox"]:focus-visible, .ib-check input[type="checkbox"]:focus-visible, .pl-rev-table input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { label.wk-mine input[type="checkbox"], label.wk-mine input[type="checkbox"]::after { transition: none; } }

/* money overview */
.mn-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.mn-card { margin-bottom: 16px; padding: 18px; border: 1px solid var(--sh-line, var(--line)); border-radius: 16px; background: var(--paper); }
.mn-cols .mn-card { margin-bottom: 0; }
.mn-card h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.mn-line { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--sh-line, var(--line)); font-size: 14.5px; }
.mn-total { border-bottom: 0; font-size: 16px; font-weight: 600; }
.mn-total b.is-good { color: #1a7f4b; } .mn-total b.is-bad { color: #b3261e; }
.fn-form label.wk-mine { margin: 0; align-self: center; }
@media (max-width: 800px) { .mn-cols { grid-template-columns: 1fr; } }

/* the forms on costs, stock, money and the calculators share one look */
.fn-form input:not([type="checkbox"]):not([type="file"]), .fn-form select { box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.fn-form input::placeholder { color: var(--ink-soft); }
.fn-form input:focus, .fn-form select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.fn-form .tl-btn { width: 100%; height: 44px; }
.fn-form label.tl-btn { cursor: pointer; }
.fn-form label:not(.wk-mine):not(.tl-btn) { display: grid; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.fn-form { margin-bottom: 18px; }

/* logo */
.iv-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.iv-logo > span { font-size: 13px; color: var(--ink-soft); width: 100%; }
.iv-logo img { max-width: 200px; max-height: 70px; padding: 6px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: #fff; }
.iv-logo small { color: var(--ink-soft); font-size: 12.5px; }
.iv-s-logo { display: block; max-width: 220px; max-height: 70px; margin: 0 0 10px; object-fit: contain; }

/* payslips */
.ps-row { display: grid; grid-template-columns: 1fr 110px auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.ps-row input:not([type="checkbox"]) { padding: 9px 10px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; min-width: 0; }
.ps-tax { display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.ps-rec { display: grid; gap: 8px; font-size: 14px; }
.iv-hint { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); }
.iv-s-table .ps-total td { font-weight: 700; border-top: 2px solid #ddd; }

/* actions are orange buttons, not grey underlined text; removing a row is a small X */
.wk-link, .tm-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border: 1.5px solid var(--accent); border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.wk-link:hover, .tm-link:hover { background: var(--accent); color: #111; }
.wk-link:disabled, .tm-link:disabled { opacity: 0.5; cursor: default; }
.wk-x { flex: none; position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent); cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.wk-x::before { content: ""; position: absolute; inset: 9px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; }
.wk-x:hover { background: var(--accent); color: #111; }
.wk-x:focus-visible, .wk-link:focus-visible, .tm-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* month and select controls above the lists */
.fn-bar select, .fn-bar input[type="month"] { box-sizing: border-box; width: auto; min-width: 200px; height: 40px; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.fn-bar input[type="month"] { min-width: 170px; }
.fn-bar select:focus, .fn-bar input[type="month"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.ps-row { grid-template-columns: 1fr 120px auto auto; }
.fn-bar .cs, .fn-bar .cs.cs--wide { display: inline-block; width: auto; min-width: 240px; }

/* rows line up: the name takes the room, the count and the button keep one line and a fixed place */
.tm-pill { white-space: nowrap; flex: none; text-align: center; }
.tm-role-top { display: grid; grid-template-columns: minmax(0, 1fr) 112px 72px; align-items: center; gap: 16px; padding: 16px 4px; }
.tm-role-top .tm-who small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
.tm-role-top .tm-pill { justify-self: end; width: 100%; box-sizing: border-box; }
.tm-role-top .wk-link, .tm-role-top .tm-link { justify-self: end; width: 100%; box-sizing: border-box; }
.tm-row .tm-who small { white-space: normal; overflow: visible; text-overflow: clip; }
.tm-row { align-items: center; }
.tm-ctl { flex: none; flex-wrap: nowrap; align-items: center; }
@media (max-width: 600px) { .tm-role-top { grid-template-columns: minmax(0, 1fr) auto; } .tm-role-top .tm-who { grid-column: 1 / -1; } .tm-role-top .tm-pill, .tm-role-top .wk-link { width: auto; } .tm-ctl { flex-wrap: wrap; } }
.wk-st, .iv-st, .wk-who, .fn-amt, .fn-low { white-space: nowrap; }
.iv-row > *, .fl-row .fl-ctl { align-items: center; }


/* plan and usage */
.pl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pl-name { margin: 0; font-size: 22px; font-weight: 600; }
.pl-sub { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
.pl-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pl-meter { padding: 16px 18px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; background: var(--paper); }
.pl-meter-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 14px; }
.pl-meter-top span { color: var(--ink-soft); text-align: right; }
.pl-bar { height: 8px; border-radius: 999px; background: #eee; overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 300ms ease; }
.pl-meter.is-near .pl-bar i { background: #d98300; }
.pl-meter.is-full .pl-bar i { background: #b3261e; }
@media (max-width: 700px) { .pl-meters { grid-template-columns: 1fr; } }


/* printing: a copy of the one sheet is put in #printRoot and everything else is hidden, so the page is just the sheet */
#printRoot { display: none; }
@media print {
  @page { size: A4; margin: 16mm; }
  html.printing, html.printing body { background: #fff !important; padding: 0 !important; margin: 0 !important; height: auto !important; }
  html.printing body::before, html.printing body::after { display: none !important; }
  html.printing body > *:not(#printRoot) { display: none !important; }
  html.printing #printRoot { display: block; }
  #printRoot .iv-sheet, #printRoot .dc-paper { width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; background: #fff; color: #111; }
  #printRoot * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #printRoot .iv-s-table tr, #printRoot .iv-s-block, #printRoot .iv-s-totals, #printRoot .iv-s-meta { break-inside: avoid; }
  #printRoot .iv-s-table thead { display: table-header-group; }
}

/* business profile */
.bp-card { margin-bottom: 16px; }
.bp-note { margin: 0 0 14px; max-width: none; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.bp-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 24px; }
.bp-status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: #f0f0f1; font-size: 13px; font-weight: 600; }
.bp-status--ok { background: #e6f5ec; color: #1a7f4b; }
.bp-status--wait { background: #fff1de; color: #a3560c; }
.bp-dns { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: 13.5px; }
.bp-dns th { padding: 8px 10px; text-align: left; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--sh-line, var(--line)); }
.bp-dns td { padding: 9px 10px; vertical-align: top; border-bottom: 1px solid var(--sh-line, var(--line)); }
.bp-dns code { display: block; max-width: 420px; overflow-wrap: anywhere; font-size: 12.5px; }
.bp-dns-wrap { overflow-x: auto; }
.bp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0; }
.bp-mailform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.bp-mailform label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.bp-mailform input { height: 44px; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
@media (max-width: 700px) { .bp-mailform { grid-template-columns: 1fr; } }

#bpActions { margin-bottom: 22px; }

/* client details */
.cl-more { flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 4px; }
.cl-more[hidden] { display: none; }
.cl-more label { display: grid; gap: 6px; font-size: 13px; color: var(--muted, #6b6b6b); }
.cl-more input, .cl-more textarea { width: 100%; flex: none; min-width: 0; padding: 10px 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.cl-more input { height: 44px; padding-top: 0; padding-bottom: 0; }
.cl-more label:first-child { grid-column: 1 / -1; }
.tm-form .cl-toggle { flex: 0 0 auto; width: auto; background: none; color: var(--ink); border: 1.5px solid var(--accent); }
.tm-form .cl-toggle:hover { background: var(--accent); color: #111; }
@media (max-width: 720px) { .cl-more { grid-template-columns: 1fr; } }

/* invoice preview on small screens: a button opens it full screen instead of showing it beside the form */
.iv-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.iv-prev-btn, .iv-prev-close { display: none !important; }
@media (max-width: 1400px) {
  body:not(.iv-ro) .iv-paper { display: none; }
  body:not(.iv-ro) .iv-prev-btn { display: inline-flex !important; }
  body:not(.iv-ro) .iv-paper.is-open { display: block; position: fixed; inset: 0; z-index: 400; border-radius: 0; padding: 16px; overflow: auto; }
  body:not(.iv-ro) .iv-paper.is-open .iv-prev-close { display: flex !important; align-items: center; justify-content: center; position: sticky; top: 0; width: fit-content; height: 40px; margin: 0 0 12px auto; padding: 0 18px; border: 1px solid var(--sh-line, #d9d9de); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; z-index: 2; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
  body.iv-prev-open { overflow: hidden; }
}

/* the sheet never gets cut: on narrow screens its parts stack and wrap */
@media (max-width: 560px) {
  .iv-s-head { flex-wrap: wrap; gap: 12px; }
  .iv-s-totals { width: 100%; }
  .iv-s-table th, .iv-s-table td { padding: 8px 4px; font-size: 12.5px; }
  .iv-paper { padding: 12px; }
}

/* own mail account (SMTP) form */
#bpSmtpForm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#bpSmtpForm label { display: grid; gap: 6px; font-size: 13px; color: var(--muted, #6b6b6b); }
#bpSmtpForm input, #bpSmtpForm select { height: 44px; width: 100%; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
#bpSmtpForm .bp-wide, #bpSmtpForm .bp-presets { grid-column: 1 / -1; }
.bp-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted, #6b6b6b); }
#bpSmtpForm .wk-actions { flex-wrap: wrap; }
@media (max-width: 720px) { #bpSmtpForm { grid-template-columns: 1fr; } }
#bpSmtpForm + .bp-note { margin-top: 16px; }

/* full-width text, the plan notice and the hints */
.bp-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1.5px solid var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.bp-plan p { margin: 0; font-size: 15px; color: var(--ink); }
.bp-hint { margin: 0; padding: 12px 16px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 14px; line-height: 1.55; color: var(--ink); }
.bp-hint[hidden], #bpSmHostRow[hidden] { display: none; }
.bp-key { margin: 16px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); }
#bpSmtpForm .bp-hint { grid-column: 1 / -1; }

/* ---------- the schedule ---------- */
.sc { --sc-orange: #ff7a00; --sc-blue: #3b82f6; --sc-green: #16a34a; --sc-purple: #8b5cf6; --sc-red: #e5484d; --sc-grey: #8a8a93; }
.sc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 8px 0 10px; }
.sc-views { display: inline-flex; padding: 4px; border: 1px solid var(--sh-line, var(--line)); border-radius: 999px; background: var(--paper); }
.sc-views button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); font: inherit; font-size: 14px; cursor: pointer; }
.sc-views button[aria-selected="true"] { background: var(--accent); color: #111; font-weight: 600; }
.sc-nav { display: inline-flex; align-items: center; gap: 8px; }
.sc-ic { width: 36px; height: 36px; border: 1.5px solid var(--accent); border-radius: 999px; background: none; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.sc-ic:hover { background: var(--accent); color: #111; }
.sc-title { margin: 0; font-size: 20px; font-weight: 600; flex: 1 1 200px; }
.sc-zoom { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.sc-zoom select { height: 36px; padding: 0 10px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; }
.sc-tasks { margin: 0 0 12px; }
.sc-board { border: 1px solid var(--sh-line, var(--line)); border-radius: 16px; background: var(--paper); overflow: hidden; }
.sc-c-orange { --c: var(--sc-orange); } .sc-c-blue { --c: var(--sc-blue); } .sc-c-green { --c: var(--sc-green); } .sc-c-purple { --c: var(--sc-purple); } .sc-c-red { --c: var(--sc-red); } .sc-c-grey { --c: var(--sc-grey); }

/* day and week */
.sc-grid { --hw: 56px; }
.sc-head, .sc-allrow { display: grid; grid-template-columns: var(--hw) repeat(var(--days), minmax(0, 1fr)); border-bottom: 1px solid var(--sh-line, var(--line)); }
.sc-dh { padding: 8px 4px; border: 0; border-left: 1px solid var(--sh-line, var(--line)); background: none; color: var(--ink); font: inherit; cursor: pointer; display: grid; justify-items: center; gap: 2px; }
.sc-dh small { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.sc-dh b { font-size: 18px; font-weight: 600; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.sc-dh.is-today b { background: var(--accent); color: #111; }
.sc-alllbl { display: grid; place-items: center; font-size: 11px; color: var(--ink-soft); padding: 4px; }
.sc-ad { min-height: 30px; padding: 4px; border-left: 1px solid var(--sh-line, var(--line)); display: grid; gap: 3px; align-content: start; cursor: pointer; min-width: 0; }
.sc-scroll { max-height: min(70vh, 640px); overflow: auto; }
.sc-body { display: grid; grid-template-columns: var(--hw) 1fr; }
.sc-hr { position: relative; border-top: 1px solid transparent; }
.sc-hr span { position: absolute; top: -8px; right: 8px; font-size: 11px; color: var(--ink-soft); background: var(--paper); padding: 0 2px; }
.sc-hr:first-child span { display: none; }
.sc-cols { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); }
.sc-col { position: relative; border-left: 1px solid var(--sh-line, var(--line)); cursor: pointer; background-image: linear-gradient(to bottom, var(--sh-line, var(--line)) 0 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--sh-line, var(--line)) 45%, transparent) 0 1px, transparent 1px); background-size: 100% var(--hourh), 100% var(--rowh); }
.sc-col.is-today { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }
.sc-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--sc-red); pointer-events: none; z-index: 3; }
.sc-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-red); }
.sc-ev { position: absolute; z-index: 2; box-sizing: border-box; display: block; overflow: hidden; padding: 3px 7px; border: 0; border-left: 3px solid var(--c); border-radius: 8px; background: color-mix(in srgb, var(--c) 16%, var(--paper)); color: var(--ink); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.sc-ev b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ev small { display: block; color: var(--ink-soft); font-size: 11px; }
.sc-ev:hover, .sc-chip:hover { filter: brightness(0.96); }
.sc-chip { display: block; width: 100%; box-sizing: border-box; padding: 2px 8px; border: 0; border-left: 3px solid var(--c); border-radius: 6px; background: color-mix(in srgb, var(--c) 16%, var(--paper)); color: var(--ink); font: inherit; font-size: 12px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sc-chip.is-task { border-left-style: dashed; }
.is-done { opacity: 0.55; text-decoration: line-through; }

/* month */
.sc-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sc-mh { padding: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); border-bottom: 1px solid var(--sh-line, var(--line)); }
.sc-mc { min-height: 104px; padding: 4px 5px 6px; border-bottom: 1px solid var(--sh-line, var(--line)); border-right: 1px solid var(--sh-line, var(--line)); display: grid; gap: 3px; align-content: start; cursor: pointer; min-width: 0; }
.sc-mc:nth-child(7n+7) { border-right: 0; }
.sc-mc.is-out { background: color-mix(in srgb, var(--ink) 3%, transparent); color: var(--ink-soft); }
.sc-mn { justify-self: start; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.sc-mc.is-today .sc-mn { background: var(--accent); color: #111; font-weight: 700; }
.sc-more { border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 12px; text-align: left; padding: 0 4px; cursor: pointer; }

/* year */
.sc-ygrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 18px; }
.sc-ymt { border: 0; background: none; padding: 0 0 6px; color: var(--ink); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.sc-ymt:hover { color: var(--accent); }
.sc-yd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.sc-yd i { font-style: normal; font-size: 10px; color: var(--ink-soft); padding-bottom: 2px; }
.sc-yday { aspect-ratio: 1; border: 0; border-radius: 50%; background: none; color: var(--ink); font: inherit; font-size: 11.5px; cursor: pointer; padding: 0; }
.sc-yday:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.sc-yday.has1 { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sc-yday.has2 { background: color-mix(in srgb, var(--accent) 48%, transparent); font-weight: 600; }
.sc-yday.is-today { outline: 2px solid var(--accent); }

/* the form */
.sc-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 16px; background: rgba(17, 17, 17, 0.45); overflow: auto; }
.sc-modal[hidden] { display: none; }
.sc-form { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); display: grid; gap: 12px; }
.sc-form h3 { margin: 0; font-size: 20px; }
.sc-form label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.sc-form input:not([type="checkbox"]):not([type="radio"]), .sc-form select, .sc-form textarea { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.sc-form input:not([type="checkbox"]):not([type="radio"]), .sc-form select { height: 44px; padding-top: 0; padding-bottom: 0; }
.sc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.sc-form .sc-allday, .sc-form .wk-mine { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; }
.sc-dur { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-soft); }
.sc-colors { display: flex; gap: 10px; }
.sc-sw { position: relative; cursor: pointer; }
.sc-sw input { position: absolute; opacity: 0; }
.sc-sw span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--paper); }
.sc-sw input:checked + span { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--c); }
@media (max-width: 900px) {
  .sc-ygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-mc { min-height: 78px; }
  .sc-chip--sm { padding: 1px 5px; font-size: 11px; }
}
@media (max-width: 560px) {
  .sc-grid { --hw: 40px; }
  .sc-title { flex-basis: 100%; order: 5; }
  .sc-views button { padding: 0 11px; }
  .sc-ygrid { grid-template-columns: 1fr; }
  .sc-row2 { grid-template-columns: 1fr; }
  .sc-mc { min-height: 64px; padding: 2px; }
  .sc-chip--sm { font-size: 0; padding: 0; height: 6px; border-left-width: 0; border-radius: 3px; }
}

/* business picture */
.bp-sub-h { margin: 18px 0 10px; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.bp-avs { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px; }
.bp-avs .st-av { padding: 0; border: 2px solid transparent; border-radius: 50%; overflow: hidden; aspect-ratio: 1; background: none; cursor: pointer; box-shadow: 0 0 0 1px var(--sh-line, var(--line)); transition: transform 140ms ease; }
.bp-avs .st-av svg { display: block; width: 100%; height: 100%; }
.bp-avs .st-av:hover { transform: translateY(-2px); }
.bp-avs .st-av.is-on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }

/* my payslips */
.mp-list { display: grid; gap: 10px; max-width: 720px; }
.mp-row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 22px; border: 1px solid var(--sh-line, var(--line)); border-radius: 16px; background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.mp-row:hover { border-color: var(--accent); }
.mp-month { flex: 1 1 auto; font-size: 17px; font-weight: 500; }
.mp-net { color: var(--ink-soft); font-size: 14.5px; }
.mp-net b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.mp-open { color: var(--accent); font-size: 14px; }

/* profit and loss */
.pl-up { margin-bottom: 22px; }
.pl-drop { display: grid; gap: 6px; justify-items: center; padding: 30px 20px; border: 1.5px dashed var(--sh-line, var(--line)); border-radius: 18px; text-align: center; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.pl-drop:hover, .pl-drop.is-over, .pl-drop:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); outline: none; }
.pl-drop b { font-weight: 500; font-size: 17px; }
.pl-drop span { color: var(--ink-soft); font-size: 14px; max-width: 56ch; }
.pl-drop-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.pl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 4px 0 6px; }
.pl-dates { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.pl-dates input, .pl-edit input, .pl-edit select, .pl-rev-table input, .pl-rev-table select { height: 38px; padding: 0 10px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); box-sizing: border-box; }
/* a <select>'s widest option can keep it from shrinking to its grid column (e.g. a long category name), which
   overflows the row; min-width: 0 lets it follow the column like any other field */
.pl-edit select, .pl-edit input { min-width: 0; width: 100%; }
.pl-acts { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }
.pl-sheet { max-width: none; min-height: 0; margin: 14px 0 0; }
#bsSheet { margin-bottom: 28px; }
#bsOpeningForm { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#bsOpeningForm input { flex: 1 1 280px; }
#bsOpeningForm .tl-btn { width: auto; flex: 0 0 auto; padding: 0 28px; }
.pl-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pl-table td, .pl-table th { padding: 9px 10px; text-align: left; vertical-align: middle; }
.pl-table .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-sec th { padding-top: 24px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--sh-line, var(--line)); }
.pl-cat td { border-bottom: 1px solid color-mix(in srgb, var(--sh-line, #ddd) 55%, transparent); }
.pl-none td { color: var(--ink-soft); font-size: 14px; }
.pl-sub td { font-weight: 600; border-top: 1px solid var(--sh-line, var(--line)); }
.pl-big td { padding-top: 14px; font-size: 17px; font-weight: 600; background: #f6f6f7; }
.pl-net td { padding: 16px 10px; font-size: 19px; font-weight: 700; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pl-net.is-loss td { background: #fbeaea; color: #8a1f1f; }
.pl-memo { margin-top: 10px; opacity: 0.92; }
.pl-foot { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.pl-tog { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.pl-tog small { color: var(--ink-soft); font-size: 12.5px; }
.pl-tog i { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 160ms ease; }
.pl-tog[aria-expanded="true"] i { transform: rotate(45deg); }
.pl-tog:hover { color: var(--accent); }
.pl-edit { display: grid; grid-template-columns: 140px minmax(170px, 1fr) 132px 110px minmax(170px, 230px) 34px; gap: 8px; align-items: center; padding: 4px 0 8px; }
.pl-line td { padding: 4px 10px; font-size: 14px; color: var(--ink-soft); }
.pl-imp { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sh-line, var(--line)); }
.pl-imp span { display: grid; }
.pl-imp small { color: var(--ink-soft); }
.pl-card { width: min(1040px, 100%); }
.pl-tot { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }
.pl-tot b { color: var(--ink); margin-left: 6px; }
.pl-warn { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: #fdf0e4; color: #7a3d00; font-size: 14px; }
.pl-rev-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; }
.pl-rev-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pl-rev-table th { position: sticky; top: 0; background: #f6f6f7; padding: 8px 8px; text-align: left; font-weight: 500; font-size: 12.5px; color: var(--ink-soft); z-index: 1; }
.pl-rev-table td { padding: 5px 6px; border-top: 1px solid color-mix(in srgb, var(--sh-line, #ddd) 55%, transparent); }
.pl-rev-table input[type="text"][data-k="desc"] { width: 100%; min-width: 200px; }
.pl-rev-table input[data-k="amt"] { width: 110px; text-align: right; }
.pl-rev-table tr.is-off td { opacity: 0.4; }
.pl-rev-table tr.is-unsure td { background: #fff8ee; }
.pl-chk { font-style: normal; font-size: 11.5px; font-weight: 600; color: #b45309; text-transform: uppercase; letter-spacing: 0.05em; }
.pl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1060px) { .pl-edit { grid-template-columns: 1fr 1fr; } .pl-acts { margin-left: 0; } }
html.printing .pl-ctl { display: none; }

/* fields inside the small dialogs of the money pages (add a line, new category) */
.nb-f { display: grid; gap: 6px; margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); align-content: start; }
.nb-f input, .nb-f select, .nb-f textarea { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper, #fff); color: var(--ink); font: inherit; font-size: 15px; }
.nb-f input:focus, .nb-f select:focus { outline: none; border-color: var(--accent); }
.pl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .pl-two { grid-template-columns: 1fr; } }

/* transactions */
.pl-views { margin: 0 0 14px; }
.pl-go { margin-left: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--accent); cursor: pointer; text-decoration: underline; }
.pl-stepper { display: flex; align-items: center; gap: 14px; margin: 10px 0 14px; }
.pl-month { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.pl-tiles { margin-bottom: 18px; }
.fn-tile--link { display: grid; gap: 4px; align-content: start; }
.pl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.pl-filters input[type="search"] { flex: 1 1 240px; max-width: 340px; height: 40px; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 999px; background: #fff; font: inherit; font-size: 14.5px; }
.pl-filters select { height: 40px; padding: 0 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: #fff; font: inherit; font-size: 14px; max-width: 240px; }
.pl-chips { display: flex; gap: 6px; }
.pl-chips button, .pl-chip-need { min-height: 36px; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 999px; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.pl-chips button:hover, .pl-chip-need:hover { border-color: var(--accent); color: var(--accent); }
.pl-chips button.is-on, .pl-chip-need.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pl-chip-need { border-color: #e0b27a; color: #7a3d00; }
.pl-txhead { display: flex; align-items: center; gap: 16px; margin: 6px 0 4px; font-size: 13.5px; color: var(--ink-soft); }
.pl-txlist { border-top: 1px solid var(--sh-line, var(--line)); }
.pl-txrow { padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--sh-line, #ddd) 55%, transparent); }
.pl-edit--tx { grid-template-columns: 140px minmax(170px, 1fr) 132px 110px minmax(180px, 230px) 136px 34px; padding: 2px 0; }
.pl-badge { height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: #eee; color: #444; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pl-badge:hover { filter: brightness(0.95); }
.pl-badge--revenue, .pl-badge--other_income { background: #e3f4e6; color: #1d6b2c; }
.pl-badge--cost_of_sales, .pl-badge--expenses { background: #fdeae0; color: #9a3d00; }
.pl-badge--ignore { background: #ececf0; color: #555; }
@media (max-width: 1300px) { .pl-edit--tx { grid-template-columns: 1fr 1fr; } .pl-badge { justify-self: start; } }

/* business finder */
.fd-search { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.fd-search input { flex: 1 1 280px; height: 46px; padding: 0 18px; border: 1px solid var(--sh-line, var(--line)); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; }
.fd-search select { height: 46px; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; background: #fff; font: inherit; font-size: 14.5px; max-width: 260px; }
.fd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.fd-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--sh-line, var(--line)); border-radius: 18px; background: #fff; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease; }
.fd-card:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(255, 122, 0, 0.1); }
.fd-logo { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 20px; font-weight: 600; overflow: hidden; }
.fd-logo img { width: 100%; height: 100%; object-fit: contain; }
/* a picture or logo shows whole, on a plain background: the orange is only for the letter shown when there is no picture */
.fd-logo:has(img) { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.fd-logo--big { width: 64px; height: 64px; }
.fd-main { display: grid; gap: 5px; min-width: 0; }
.fd-main b { font-weight: 550; font-size: 16.5px; }
.fd-main > span { color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.fd-main small { color: var(--ink-soft); font-size: 12.5px; }
.fd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.fd-tags i { font-style: normal; padding: 3px 10px; border-radius: 999px; background: #f0f0f2; color: #444; font-size: 12px; }
.fd-detail { width: min(640px, 100%); }
.fd-dh { display: flex; align-items: center; gap: 16px; }
.fd-where { margin: 0 0 8px; color: var(--ink-soft); font-size: 14px; }
.fd-desc { margin: 0 0 14px; line-height: 1.65; font-size: 15.5px; }
.fd-detail h4 { margin: 18px 0 8px; font-size: 15px; font-weight: 600; }
.fd-offers { margin: 0 0 12px; padding-left: 18px; line-height: 1.7; }
.fd-contact { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 6px; }
.fd-contact a { color: var(--accent); text-decoration: underline; font-size: 14.5px; }
.fd-note { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.fd-ok { margin: 6px 0 0; color: #1d6b2c; font-size: 14px; }
.fd-sp { flex: 1 1 auto; }
.fd-form { display: grid; gap: 4px; max-width: 720px; }
.fd-switch { padding: 16px 18px; margin-bottom: 8px; border: 1px solid var(--sh-line, var(--line)); border-radius: 16px; background: #fff; }
.fd-switch p { margin: 6px 0 0 28px; font-size: 13.5px; color: var(--ink-soft); }
.fd-h { margin: 20px 0 6px; font-size: 17px; font-weight: 500; }
.fd-fs { margin: 0 0 16px; padding: 0; border: 0; }
.fd-fs legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--ink-soft); }
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-chip input { position: absolute; opacity: 0; pointer-events: none; }
.fd-chip span { display: inline-block; padding: 7px 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 999px; font-size: 13.5px; cursor: pointer; }
.fd-chip span:hover { border-color: var(--accent); }
.fd-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.fd-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-add { display: flex; gap: 10px; }
.fd-add input { flex: 1 1 auto; height: 44px; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: #fff; font: inherit; font-size: 15px; }
.fd-offerlist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fd-offer { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 14px; border-radius: 999px; background: #f0f0f2; font-size: 13.5px; }
.fd-offer button { width: 18px; height: 18px; border: 0; border-radius: 50%; background: none; cursor: pointer; position: relative; }
.fd-offer button::before, .fd-offer button::after { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.fd-offer button::after { transform: rotate(-45deg); }
.fd-search .cs, .fd-search .cs.cs--wide { flex: 1 1 200px; max-width: 260px; width: auto; }
.fd-form .cs, .fd-form .cs.cs--wide { width: 100%; }

/* every field says whether it is needed (an orange star) or can be left empty ("(optional)") */
.fl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.fl b, .fd-note b, .fd-req b, legend b { color: var(--accent); font-weight: 700; }
.fl small, legend small, .wk-mine small { color: var(--ink-soft); font-weight: 400; font-size: 12.5px; }
.fd-req { margin: 0 0 6px; font-size: 13px; color: var(--ink-soft); }
.ib-check { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.pl-rev-table input[type="checkbox"] { width: 36px; height: 22px; }
.pl-rev-table input[type="checkbox"]::after { width: 16px; height: 16px; }
.pl-rev-table input[type="checkbox"]:checked::after { transform: translateX(14px); }

.bp-numcard { margin-bottom: 18px; }
.bp-num { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 4px 0 0; }
.bp-num b { padding: 10px 20px; border: 1.5px dashed var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 22px; font-weight: 600; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.fd-no { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }

/* cash budget: the months run across, so the table scrolls sideways on a narrow screen */
.cb-scroll { overflow-x: auto; }
.cb-table { min-width: 560px; }
.cb-table th, .cb-table td { white-space: nowrap; }
.cb-table td.r, .cb-table th.r { text-align: right; }
.cb-bad { color: #b3261e; font-weight: 600; }
.cb-warn { color: #8a5a00; font-weight: 600; }
.cb-item-amt { margin-left: auto; font-variant-numeric: tabular-nums; }
/* space between the statement and the section below it */
#cbItemsBox { margin-top: 40px; }
#cfSheet + .tm-sub { margin-top: 32px; }
/* the cash budget tiles: the label takes two lines, so every amount sits at the same height whether its label wraps or not */
#cbTiles .fn-tile { align-content: start; grid-template-rows: 38px auto auto; }
#cbTiles .fn-tile b { line-height: 1.2; }
/* forms laid out in columns: a wide dropdown or a long button label never spills over the next column, on any screen size */
.fn-form > * { min-width: 0; }
.fn-form select, .fn-form input:not([type="checkbox"]):not([type="file"]) { max-width: 100%; text-overflow: ellipsis; }
.fn-form .tl-btn { height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; white-space: normal; line-height: 1.25; }
/* the title of a document (Balance sheet, Cash budget, Invoice…) never breaks across two lines: when there is not room beside the business details, the whole title drops below them */
.iv-s-head { flex-wrap: wrap; }
.iv-s-title { flex: 0 0 auto; margin-left: auto; max-width: 100%; }
.iv-s-title h1, .iv-s-title p { white-space: nowrap; }
.bp-sub { margin: 22px 0 4px; font-size: 15px; font-weight: 600; }
/* cash budget amounts: each gets the room the longest one needs, never overlaps its neighbour, and the text eases down a little for very large numbers */
.cb-table { --cb-ch: 12; --cb-fs: 1; }
.cb-table td.r, .cb-table th.r { font-size: calc(15px * var(--cb-fs)); min-width: calc(var(--cb-ch) * 0.64em + 28px); padding-left: 14px; padding-right: 14px; font-variant-numeric: tabular-nums; }
.cb-table .pl-cat td.r { font-size: calc(14px * var(--cb-fs)); }
.cb-table .pl-net td.r { font-size: calc(19px * var(--cb-fs)); }
.cb-table td:first-child, .cb-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); min-width: 150px; white-space: normal; }
.cb-table .pl-net td:first-child { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.cb-table .pl-sec th:first-child, .cb-table .pl-none td:first-child { position: static; }
#cbTiles .fn-tile b { overflow-wrap: anywhere; line-height: 1.2; }
/* the cash budget's "add a line" form: every field and the Add button are the same height and sit on the same line, whether or not the field has a label above it */
#cbItemForm { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
#cbItemForm > * { min-width: 0; margin: 0; }
#cbItemForm .nb-f { display: grid; gap: 6px; margin: 0; }
#cbItemForm input:not([type="checkbox"]), #cbItemForm select, #cbItemForm .tl-btn { box-sizing: border-box; width: 100%; height: 46px; min-height: 46px; margin: 0; }
#cbItemForm .tl-btn { padding-top: 0; padding-bottom: 0; }
/* the cash budget on paper: nothing scrolls or sticks, so every month is printed */
@media print {
  #printRoot .cb-scroll { overflow: visible; }
  #printRoot .cb-table { min-width: 0; width: 100%; }
  #printRoot .cb-table td:first-child, #printRoot .cb-table th:first-child { position: static; }
  #printRoot .cb-table tr { break-inside: avoid; }
}
@media print {
  #printRoot .cb-chunk { break-inside: avoid; margin-bottom: 14px; }
  #printRoot .cb-chunk .cb-table { min-width: 0; width: 100%; }
  #printRoot .cb-table td, #printRoot .cb-table th { padding: 2px 8px; line-height: 1.15; }
  #printRoot .cb-table td.r, #printRoot .cb-table th.r { font-size: calc(12px * var(--cb-fs)); min-width: 0; padding-left: 8px; padding-right: 8px; }
  #printRoot .cb-table .pl-cat td.r { font-size: calc(11px * var(--cb-fs)); }
  #printRoot .cb-table .pl-net td.r { font-size: calc(14px * var(--cb-fs)); }
  #printRoot .cb-table .pl-net td { padding: 4px 8px; font-size: 14px; }
  #printRoot .cb-table td:first-child, #printRoot .cb-table th:first-child { min-width: 120px; }
}

/* Teams: the chat */
.tc-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.tc-side, .tc-main { border: 1px solid var(--sh-line, var(--line)); border-radius: 16px; background: var(--paper); }
.tc-side { padding: 14px; display: grid; gap: 8px; }
.tc-side h2 { margin: 0 0 4px; font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.tc-list { display: grid; gap: 2px; }
.tc-ch { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.tc-ch:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tc-ch.is-on { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
.tc-hash { color: var(--ink-soft); }
.tc-chn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-badge { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #111; font-size: 12px; font-weight: 700; text-align: center; }
.tc-newform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.tc-newform input { box-sizing: border-box; height: 40px; min-width: 0; padding: 0 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; }
.tc-newform .tl-btn { height: 40px; }
.tc-main { display: flex; flex-direction: column; height: min(72vh, 680px); min-height: 380px; overflow: hidden; }
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sh-line, var(--line)); }
.tc-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.tc-head small { color: var(--ink-soft); font-size: 13px; }
.tc-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 18px 16px; display: flex; flex-direction: column; }
.tc-day { display: flex; justify-content: center; margin: 14px 0 6px; }
.tc-day span { padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft); font-size: 12px; }
.tc-msg { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; margin-top: 12px; padding: 2px 40px 2px 0; border-radius: 10px; }
.tc-msg:hover, .tc-msg:focus-within { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.tc-msg.is-flash { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tc-msg.is-joined { margin-top: 2px; }
.tc-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; overflow: hidden; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; }
.tc-av:empty { background: none; }
.tc-av img { width: 100%; height: 100%; object-fit: cover; }
.tc-meta { display: flex; align-items: baseline; gap: 8px; }
.tc-meta b { font-size: 14.5px; }
.tc-meta time { color: var(--ink-soft); font-size: 12px; }
.tc-text { margin: 2px 0 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.tc-more { align-self: center; margin: 4px 0 8px; }
.tc-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 12px 14px; border-top: 1px solid var(--sh-line, var(--line)); }
.tc-form textarea { box-sizing: border-box; min-height: 46px; max-height: 140px; padding: 12px 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.35; resize: none; }
.tc-form .tl-btn { height: 46px; }
.tc-main > .tm-say { margin: 0; padding: 0 18px 10px; }
@media (max-width: 760px) {
  .tc-wrap { grid-template-columns: minmax(0, 1fr); }
  .tc-side { padding: 10px; }
  .tc-list { display: flex; gap: 6px; overflow-x: auto; }
  .tc-ch { width: auto; flex: none; border: 1px solid var(--sh-line, var(--line)); }
  .tc-main { height: 70vh; }
}

/* Teams: the three dots and everything inside them */
.tc-dots { position: absolute; top: 2px; right: 4px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: var(--ink-soft); cursor: pointer; opacity: 0; }
.tc-msg:hover .tc-dots, .tc-msg:focus-within .tc-dots, .tc-dots[aria-expanded="true"] { opacity: 1; }
.tc-dots:hover, .tc-dots[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.tc-dots:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
@media (hover: none) { .tc-dots { opacity: 1; } }
.tc-menu { position: fixed; z-index: 2000; min-width: 230px; max-width: calc(100vw - 16px); padding: 6px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; background: var(--paper); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); }
.tc-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.tc-menu button:hover, .tc-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); outline: none; }
.tc-menu .is-danger { color: #b3261e; }
.tc-menu-react { display: flex; gap: 2px; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--sh-line, var(--line)); }
.tc-menu-react button { width: auto; flex: 1; padding: 6px 0; text-align: center; font-size: 19px; line-height: 1; }
.tc-menu-react .is-on { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tc-reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tc-react { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--sh-line, var(--line)); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.tc-react.is-mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--paper)); }
.tc-react b { font-weight: 600; }
.tc-quote { display: grid; gap: 1px; margin: 3px 0 4px; padding: 4px 10px; border-left: 3px solid var(--accent); border-radius: 4px; background: color-mix(in srgb, var(--ink) 5%, transparent); font-size: 13px; color: var(--ink-soft); }
.tc-quote b { color: var(--ink); font-weight: 600; }
.tc-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-edited { color: var(--ink-soft); font-size: 12px; }
.tc-pinmark { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); font-size: 11.5px; font-weight: 600; }
.tc-edit textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.4; resize: vertical; }
.tc-edit-act { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.tc-edit-act .tl-btn { height: 36px; padding: 0 16px; }
.tc-edit-act small { color: var(--ink-soft); font-size: 12px; }
.tc-pinned { max-height: 140px; overflow-y: auto; border-bottom: 1px solid var(--sh-line, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tc-pinrow { display: flex; gap: 10px; width: 100%; padding: 8px 18px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.tc-pinrow:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tc-pinrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.tc-replybar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 18px; border-top: 1px solid var(--sh-line, var(--line)); background: color-mix(in srgb, var(--ink) 4%, transparent); font-size: 13.5px; color: var(--ink-soft); }
.tc-replybar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-fwlist { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }

/* Teams: the emoji button and picker */
.tc-emoji-btn { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; background: var(--paper); color: var(--ink-soft); cursor: pointer; }
.tc-emoji-btn:hover, .tc-emoji-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--accent); }
.tc-picker { position: fixed; z-index: 2000; width: 320px; max-width: calc(100vw - 16px); padding: 8px; border: 1px solid var(--sh-line, var(--line)); border-radius: 16px; background: var(--paper); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); }
.tc-picker-tabs { display: flex; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--sh-line, var(--line)); }
.tc-picker-tabs button { flex: 1; padding: 6px 0; border: 0; border-radius: 9px; background: none; font-size: 19px; line-height: 1; cursor: pointer; }
.tc-picker-tabs .is-on { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.tc-picker-title { margin: 8px 6px 4px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.tc-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 210px; overflow-y: auto; }
.tc-picker-grid button { padding: 6px 0; border: 0; border-radius: 9px; background: none; font-size: 22px; line-height: 1; cursor: pointer; }
.tc-picker-grid button:hover, .tc-picker-grid button:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: none; }
.tc-picker button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Teams: the Send button has the same shape, border and height as the message box and the emoji button beside it, on the same line. Its hover and focus look is the site's usual one, untouched. */
.tc-form { align-items: end; }
html[data-ui="app"] .tc-form .tl-btn { box-sizing: border-box; height: 46px; min-height: 46px; padding: 0 22px; border-radius: 14px; font-weight: 600; }
html[data-ui="app"] .tc-form .tl-btn:not(:hover):not(:focus-visible):not(:active) { border: 1px solid var(--sh-line, var(--line)) !important; }
.tc-form textarea { border-radius: 14px; }

/* Teams: compact popups, drawn with a border and no shadow */
.tc-menu, .tc-picker { box-shadow: none !important; }
.tc-menu { min-width: 210px; padding: 4px; border-radius: 12px; }
.tc-menu button { padding: 6px 10px; font-size: 13.5px; border-radius: 8px; }
.tc-menu .tc-menu-item { display: flex; align-items: center; gap: 10px; }
.tc-menu .tc-menu-item svg { flex: none; color: var(--ink-soft); }
.tc-menu .is-danger svg { color: #b3261e; }
.tc-menu-react { padding: 2px 2px 4px; margin-bottom: 3px; }
.tc-menu-react button { padding: 4px 0; font-size: 16px; }
.tc-picker { width: 288px; padding: 6px; border-radius: 12px; }
.tc-picker-tabs { padding-bottom: 4px; overflow-x: auto; }
.tc-picker-tabs button { flex: 1 0 auto; min-width: 30px; padding: 4px 0; font-size: 16px; }
.tc-picker-title { margin: 6px 4px 2px; font-size: 11px; }
.tc-picker-grid { grid-template-columns: repeat(8, 1fr); max-height: 168px; }
.tc-picker-grid button { padding: 4px 0; font-size: 19px; }

/* Teams: polls and quizzes */
.tc-pollcard [hidden] { display: none !important; }
.tc-pollcard { max-width: 460px; }
.tc-optrows { display: grid; gap: 8px; margin: 4px 0 6px; }
.tc-optrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.tc-optin { box-sizing: border-box; height: 42px; min-width: 0; padding: 0 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14.5px; }
.tc-right { margin: 0 !important; white-space: nowrap; font-size: 13px !important; }
.tc-polltoggles { display: grid; gap: 2px; margin-top: 8px; }
.tc-poll { margin: 4px 0 2px; padding: 12px 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; background: var(--paper); max-width: 440px; }
.tc-poll-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tc-poll-kind { padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tc-poll-closed { color: var(--ink-soft); font-size: 12px; }
.tc-poll-q { margin: 0 0 8px; font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.tc-opts { display: grid; gap: 6px; }
.tc-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; overflow: hidden; }
.tc-opt:hover:not(:disabled) { border-color: var(--accent); }
.tc-opt:disabled { cursor: default; }
.tc-opt-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); transition: width 240ms ease; }
.tc-opt-label, .tc-opt-n { position: relative; }
.tc-opt-n { flex: none; color: var(--ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tc-opt.is-mine { border-color: var(--accent); }
.tc-opt.is-correct { border-color: #1a7f4b; } .tc-opt.is-correct .tc-opt-fill { background: color-mix(in srgb, #1a7f4b 18%, transparent); }
.tc-opt.is-wrong { border-color: #b3261e; } .tc-opt.is-wrong .tc-opt-fill { background: color-mix(in srgb, #b3261e 14%, transparent); }
.tc-opt-tag { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); font-size: 11px; font-style: normal; font-weight: 600; }
.tc-opt-tag.is-right { background: color-mix(in srgb, #1a7f4b 20%, transparent); }
.tc-quiz-result { margin: 8px 0 0; font-weight: 600; } .tc-quiz-result.is-right { color: #1a7f4b; } .tc-quiz-result.is-wrong { color: #b3261e; }
.tc-quiz-why { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.tc-poll-foot { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.tc-picker-tabs { overflow: hidden; }
.tc-picker-tabs button { flex: 1 1 0; min-width: 0; }

/* Teams: the "New channel" button is shaped like the Send button (same corners and light border); its hover and focus look stays the site's usual one */
html[data-ui="app"] .tc-side .wk-link#tcNew { box-sizing: border-box; width: 100%; height: 42px; min-height: 42px; border-radius: 14px; font-weight: 600; }
html[data-ui="app"] .tc-side .wk-link#tcNew:not(:hover):not(:focus-visible):not(:active) { border: 1px solid var(--sh-line, var(--line)) !important; }
.tc-newform .tl-btn { border-radius: 14px; }
html[data-ui="app"] .tc-newform .tl-btn:not(:hover):not(:focus-visible):not(:active) { border: 1px solid var(--sh-line, var(--line)) !important; }

/* Teams: very thin, quiet scrollbars (they only really show when you hover and scroll) */
.tc-msgs, .tc-picker-grid, .tc-picker-tabs, .tc-menu, .tc-pinned, .tc-fwlist, .tc-list, .tc-edit textarea, .tc-form textarea { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.16) transparent; }
.tc-msgs::-webkit-scrollbar, .tc-picker-grid::-webkit-scrollbar, .tc-picker-tabs::-webkit-scrollbar, .tc-menu::-webkit-scrollbar, .tc-pinned::-webkit-scrollbar, .tc-fwlist::-webkit-scrollbar, .tc-list::-webkit-scrollbar, .tc-form textarea::-webkit-scrollbar { width: 3px; height: 3px; }
.tc-msgs::-webkit-scrollbar-track, .tc-picker-grid::-webkit-scrollbar-track, .tc-picker-tabs::-webkit-scrollbar-track, .tc-menu::-webkit-scrollbar-track, .tc-pinned::-webkit-scrollbar-track, .tc-fwlist::-webkit-scrollbar-track, .tc-list::-webkit-scrollbar-track, .tc-form textarea::-webkit-scrollbar-track { background: transparent; }
.tc-msgs::-webkit-scrollbar-thumb, .tc-picker-grid::-webkit-scrollbar-thumb, .tc-picker-tabs::-webkit-scrollbar-thumb, .tc-menu::-webkit-scrollbar-thumb, .tc-pinned::-webkit-scrollbar-thumb, .tc-fwlist::-webkit-scrollbar-thumb, .tc-list::-webkit-scrollbar-thumb, .tc-form textarea::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.16); border-radius: 3px; }
.tc-msgs::-webkit-scrollbar-button, .tc-picker-grid::-webkit-scrollbar-button, .tc-picker-tabs::-webkit-scrollbar-button, .tc-menu::-webkit-scrollbar-button, .tc-pinned::-webkit-scrollbar-button, .tc-fwlist::-webkit-scrollbar-button, .tc-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.tc-picker-tabs { overflow: hidden; }

/* Teams: the full-screen layout. The channel list and the chat fill the page from the top bar to the bottom, the messages scroll in the middle, and the message box never moves. */
html[data-ui="app"]:has(main.tc) { overflow: hidden; }
html[data-ui="app"] main.tc { box-sizing: border-box; height: calc(100vh - var(--sh-top)); height: calc(100dvh - var(--sh-top)); min-height: 0; margin: 0; padding: 0 !important; overflow: hidden; }
main.tc > .tm-gate { margin: 28px 32px; }
main.tc .tc-wrap { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 0; height: 100%; min-height: 0; align-items: stretch; }
main.tc .tc-wrap[hidden] { display: none; }
main.tc .tc-side { border: 0; border-right: 1px solid var(--sh-line, var(--line)); border-radius: 0; padding: 18px 14px; align-content: start; overflow-y: auto; min-height: 0; }
main.tc .tc-main { height: 100%; min-height: 0; border: 0; border-radius: 0; }
main.tc .tc-head { min-height: 64px; box-sizing: border-box; }
main.tc .tc-form { background: var(--paper); }
.tc-main > .tm-say:empty { display: none; }
.tc-main > .tm-say { padding: 6px 18px; }
@media (max-width: 760px) {
  main.tc .tc-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  main.tc .tc-side { border-right: 0; border-bottom: 1px solid var(--sh-line, var(--line)); padding: 10px 12px; overflow-y: visible; }
  main.tc .tc-side h2 { display: none; }
  main.tc .tc-main { height: 100%; }
}

/* Teams: the plus button, the Send icon and the New channel button at the bottom of the channel list. Hover and focus keep the site's usual look. */
.tc-plus-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--accent); }
.tc-plus-menu { min-width: 170px; }
html[data-ui="app"] .tc-form .tc-send { width: 46px; min-width: 46px; padding: 0 !important; }
.tc-send svg { display: block; }
main.tc .tc-side { display: flex; flex-direction: column; gap: 8px; }
main.tc .tc-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
main.tc .tc-side > h2 { flex: none; }
main.tc .tc-side > .tc-newform, main.tc .tc-side > #tcNew, main.tc .tc-side > .tm-say { flex: none; }
main.tc .tc-side > .tm-say:empty { display: none; }
@media (max-width: 760px) { main.tc .tc-side { flex-direction: row; flex-wrap: wrap; align-items: center; } main.tc .tc-list { display: flex; flex: 1 1 0; min-width: 0; overflow-x: auto; overflow-y: visible; } html[data-ui="app"] main.tc .tc-side .wk-link#tcNew { width: auto; padding: 0 14px; } }

/* Teams: your messages on the right, everyone else's on the left, each in a bubble */
.tc-msg { display: flex; align-items: flex-start; gap: 10px; align-self: flex-start; max-width: min(78%, 680px); margin-top: 14px; padding: 0 40px 0 0; border-radius: 0; }
.tc-msg:hover, .tc-msg:focus-within, .tc-msg.is-flash { background: none; }
.tc-msg.is-joined { margin-top: 3px; }
.tc-msg.is-mine { flex-direction: row-reverse; align-self: flex-end; padding: 0 0 0 40px; }
.tc-av { flex: none; }
.tc-body { min-width: 0; }
.tc-msg.is-mine .tc-body { display: flex; flex-direction: column; align-items: flex-end; }
.tc-msg.is-mine .tc-meta { justify-content: flex-end; }
.tc-bubble { max-width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
.tc-msg.is-mine .tc-bubble { border-radius: 14px 4px 14px 14px; background: color-mix(in srgb, var(--accent) 17%, var(--paper)); }
.tc-bubble .tc-text { margin: 0; }
.tc-bubble .tc-quote { margin: 0 0 6px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.tc-msg.is-flash .tc-bubble { outline: 2px solid var(--accent); }
.tc-msg.is-mine .tc-reacts { justify-content: flex-end; }
.tc-msg .tc-dots { right: 4px; left: auto; }
.tc-msg.is-mine .tc-dots { right: auto; left: 4px; }
.tc-msg .tc-poll { width: min(440px, 100%); text-align: left; }
.tc-msg .tc-edit { width: min(480px, 100%); text-align: left; }
@media (max-width: 760px) { .tc-msg { max-width: 92%; } }

/* Teams: more reactions */
.tc-menu-react { flex-wrap: wrap; }
.tc-menu-react[hidden] { display: none; }
.tc-menu-more { padding-top: 0; }
.tc-menu-react button { flex: 1 0 16.6%; }
.tc-menu .tc-more-toggle { display: block; margin: 0 0 3px; padding: 4px 10px; font-size: 12px; color: var(--ink-soft); border-bottom: 1px solid var(--sh-line, var(--line)); border-radius: 8px 8px 0 0; }
.tc-menu .tc-more-toggle:hover, .tc-menu .tc-more-toggle:focus-visible { color: var(--ink); }
.tc-menu .tc-menu-react { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.tc-menu .tc-menu-react + .tc-more-toggle, .tc-menu .tc-menu-more + .tc-more-toggle { margin-top: 2px; }
.tc-menu .tc-menu-react { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.tc-menu .tc-menu-react[hidden] { display: none; }
.tc-menu .tc-menu-react button { width: auto; flex: none; }

/* Employee finder: the whole width of the screen. The profile editor on the left, how businesses see you on the right. */
main.ef { max-width: none; }
.ef-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.ef-title { margin: 0 0 6px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.ef-top .tm-sub { margin: 0; max-width: 760px; }
.ef-top .ib-tabs { margin: 0; }
.ef-filters { display: grid; grid-template-columns: minmax(220px, 2.2fr) repeat(5, minmax(130px, 1fr)) auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.ef-filters input, .ef-filters select { box-sizing: border-box; width: 100%; height: 44px; min-width: 0; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14.5px; }
.ef-filters .tl-btn { height: 44px; border-radius: 14px; }
.ef-count { min-height: 20px; margin: 6px 2px 10px; color: var(--ink-soft); font-size: 13.5px; }
.ef-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.ef-person { width: 100%; text-align: left; }
.ef-avail { color: #1a7f4b; font-weight: 600; }
.ef-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 22px; align-items: start; }
.ef-form { display: grid; gap: 16px; min-width: 0; }
.ef-card { min-width: 0; padding: 20px 22px; border: 1px solid var(--sh-line, var(--line)); border-radius: 16px; background: var(--paper); }
.ef-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ef-card-h h2 { margin: 0; font-size: 18px; font-weight: 600; }
.ef-card-h p { margin: 3px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.ef-card-h .tl-btn { flex: none; height: 40px; border-radius: 12px; }
.ef-card .nb-f { display: grid; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
.ef-card .nb-f input, .ef-card .nb-f select { box-sizing: border-box; width: 100%; height: 44px; min-width: 0; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14.5px; }
.ef-card .nb-f textarea { box-sizing: border-box; width: 100%; height: auto; padding: 10px 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.4; resize: vertical; }
.ef-card .nb-f input:focus, .ef-card .nb-f select:focus, .ef-card .nb-f textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.ef-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ef-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.ef-pay { align-self: center; padding-top: 6px; }
.ef-h3 { margin: 8px 0 4px; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.ef-toggles { display: flex; flex-wrap: wrap; gap: 2px 26px; }
.ef-toggles .wk-mine { margin: 4px 0 6px; }
.ef-rows { display: grid; gap: 12px; }
.ef-row { padding: 14px 16px 6px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--ink) 2.5%, var(--paper)); }
.ef-row-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ef-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--sh-line, var(--line)); border-radius: 14px; color: var(--ink-soft); font-size: 14px; }
.ef-tagbox { margin-bottom: 8px; }
.ef-tagbox .fl { display: block; margin-bottom: 6px; font-size: 13px; color: var(--ink-soft); }
.ef-side { position: sticky; top: 76px; display: grid; gap: 14px; min-width: 0; max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); overflow-y: auto; padding-right: 2px; align-content: start; }
.ef-vis p { margin: 4px 0 10px 56px; color: var(--ink-soft); font-size: 13.5px; }
.ef-meter { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.ef-meter span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 220ms ease; }
.ef-meter-text { margin: 8px 0 0 !important; }
.ef-preview { font-size: 14.5px; }
.ef-prev-tag { margin: 0 0 10px; color: var(--ink-soft); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.ef-prev-head { display: flex; gap: 12px; align-items: center; }
.ef-prev-head h3 { margin: 0; font-size: 18px; }
.ef-prev-head p { margin: 2px 0 0; }
.ef-prev-head small { color: var(--ink-soft); }
.ef-ph { color: var(--ink-soft); }
.ef-prev-facts, .ef-prev-about { margin: 10px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.ef-preview h4, .ef-detail h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.ef-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ef-list li { padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.ef-list li small { display: block; color: var(--ink-soft); font-size: 12.5px; }
.ef-list li p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.ef-savebar { display: flex; align-items: center; gap: 14px; }
.ef-savebar .tl-btn { height: 46px; min-width: 170px; border-radius: 14px; }
.ef-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 18px; margin: 12px 0; }
.ef-facts dt { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.ef-facts dd { margin: 2px 0 0; font-size: 14.5px; }
.ef-detail { max-width: 720px; }
@media (max-width: 1180px) { .ef-edit { grid-template-columns: minmax(0, 1fr); } .ef-side { position: static; max-height: none; overflow: visible; } .ef-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ef-filters input[type="search"] { grid-column: 1 / -1; } }
@media (max-width: 720px) { .ef-grid2, .ef-grid3 { grid-template-columns: minmax(0, 1fr); } .ef-filters { grid-template-columns: minmax(0, 1fr); } .ef-grid { grid-template-columns: minmax(0, 1fr); } .ef-card { padding: 16px; } .ef-card-h { flex-wrap: wrap; } }
.ef-edit .fd-fs { margin: 0 0 14px; }
.ef-card .fd-add input { box-sizing: border-box; }
.ef-card small { color: var(--ink-soft); font-size: 12.5px; }
.ef-prev-head .fd-logo { width: 48px; height: 48px; }
.ef-preview .fd-offers { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; }
.ef-edit .fd-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ef-edit .fd-chip { display: block; position: relative; }
.ef-edit .fd-chip span { display: block; box-sizing: border-box; width: 100%; padding: 9px 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-edit .fd-chips.is-short .fd-chip:nth-child(n+7):not(:has(input:checked)) { display: none; }
.fd-more { margin-top: 10px; }
.ef-grid3 { align-items: end; }
.ef-grid3 .nb-f .fl, .ef-grid2 .nb-f .fl { min-height: 1.3em; }
/* Employee finder filters: as many columns as fit, so nothing runs off the right edge */
.ef-filters { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ef-filters input[type="search"] { grid-column: 1 / -1; }
.ef-filters .tl-btn { width: 100%; }
/* phone width: nothing may be wider than the screen */
.su-body { min-width: 0; flex: 1 1 auto; }
.su-body p { max-width: 100%; overflow-wrap: anywhere; }
.nb-f { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.nb-f > * { min-width: 0; max-width: 100%; }
.nb-f .cs, .nb-f .cs--wide { width: 100%; max-width: 100%; box-sizing: border-box; }
.su-body .wk-link, .su-step .wk-link { white-space: normal; max-width: 100%; height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; text-align: center; }

/* ---- Job offers: full width ---- */
main.jo { max-width: none; }
.jo-tabs { display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--sh-line, var(--line)); overflow-x: auto; scrollbar-width: none; }
.jo-tabs button { flex: none; min-height: 46px; padding: 0 16px; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; color: var(--ink-soft) !important; font: inherit; font-size: 14.5px; cursor: pointer; }
.jo-tabs button:hover { color: var(--ink) !important; }
.jo-tabs button.is-on { color: var(--accent) !important; border-bottom-color: var(--accent) !important; font-weight: 600; }
.jo-subtabs { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.jo-subtabs button { height: 38px; padding: 0 16px; border: 1px solid var(--sh-line, var(--line)); border-radius: 999px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 14px; cursor: pointer; }
.jo-subtabs button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.jo-filters { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: center; margin: 0 0 8px; }
.jo-filters input, .jo-filters select { box-sizing: border-box; width: 100%; height: 44px; min-width: 0; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14.5px; }
.jo-filters .tl-btn { height: 44px; border-radius: 14px; width: 100%; }
.jo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.jo-card { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid var(--sh-line, var(--line)); border-radius: 18px; background: var(--paper); text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.jo-card:hover { border-color: var(--accent); }
.jo-card-top { display: flex; align-items: center; gap: 12px; }
.jo-card-t { display: grid; gap: 2px; min-width: 0; }
.jo-card-t b { font-weight: 600; font-size: 16.5px; }
.jo-card small, .jo-meta { color: var(--ink-soft); font-size: 13px; }
.jo-pay { font-weight: 600; font-size: 14.5px; }
.jo-foot { margin-top: 2px; }
.jo-kind { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #f0f0f2; color: #444; font-size: 12px; font-weight: 600; }
.jo-kind--svc { background: #fff1de; color: #a45300; }
.jo-detail { width: min(760px, 100%); }
.jo-detail h4 { margin: 18px 0 8px; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.jo-paybig { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.jo-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.jo-listhead h2 { margin: 0; font-size: 20px; }
.jo-mylist { display: grid; gap: 10px; margin: 0 0 22px; }
.jo-my { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; background: var(--paper); }
.jo-my > div:first-child { display: grid; gap: 2px; min-width: 0; }
.jo-my small { color: var(--ink-soft); font-size: 13px; }
.jo-my-act { display: flex; gap: 8px; flex: none; }
.jo-form { display: grid; gap: 16px; }
.jo-form .ef-card { min-width: 0; }
.jo-tags { margin: 0 0 12px; }
.jo-tags .fl, .jo-fl { display: block; margin-bottom: 6px; font-size: 13px; color: var(--ink-soft); }
.jo-sug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jo-sug button { padding: 5px 12px; border: 1px dashed var(--sh-line, var(--line)); border-radius: 999px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 12.5px; cursor: pointer; }
.jo-sug button:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 720px) { .jo-grid { grid-template-columns: minmax(0, 1fr); } .jo-my { flex-direction: column; align-items: flex-start; } }
/* Job offers: the three sections are a row under the top bar, like the other pages */
html[data-ui="app"] main.jo > #joApp > .jo-tabs { position: sticky; top: var(--sh-top, 60px); z-index: 90; margin: -28px calc(-1 * var(--pad)) 22px; padding: 0 var(--pad); background: var(--paper); }
.jo-tabs button { display: inline-flex; align-items: baseline; gap: 8px; }
.jo-tabs button b { font-weight: inherit; font-size: 15px; letter-spacing: 0.02em; }
.jo-tabs button small { font-size: 12.5px; opacity: 0.75; }
@media (max-width: 720px) { .jo-tabs button small { display: none; } }
/* breakdown rows, tables and the business view */
.jo-rowlist { display: grid; gap: 10px; margin-bottom: 10px; }
.jo-row { display: grid; grid-template-columns: minmax(130px, 1.4fr) 92px minmax(90px, 0.7fr) minmax(90px, 0.7fr) 108px minmax(140px, 1.6fr) 28px; gap: 8px; align-items: center; }
.jo-row--terms { grid-template-columns: minmax(130px, 1fr) minmax(180px, 2.4fr) 28px; }
.jo-row input, .jo-row select { box-sizing: border-box; width: 100%; height: 40px; min-width: 0; padding: 0 10px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; }
.jo-rm { position: relative; width: 24px; height: 24px; border: 0 !important; border-radius: 50%; background: transparent !important; cursor: pointer; min-height: 0 !important; padding: 0 !important; }
.jo-rm::before, .jo-rm::after { content: ""; position: absolute; left: 5px; top: 11px; width: 14px; height: 1.5px; background: #666; transform: rotate(45deg); }
.jo-rm::after { transform: rotate(-45deg); }
.jo-rowact { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.jo-total { margin-top: 14px; display: grid; gap: 8px; }
.jo-tot { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent, #ff7a00) 6%, transparent); }
.jo-tot span { font-size: 12.5px; color: var(--ink-soft); }
.jo-tot b { font-size: 18px; font-weight: 600; }
.jo-tot small { font-size: 12.5px; color: var(--ink-soft); }
.jo-tot--big { margin-top: 10px; } .jo-tot--big b { font-size: 22px; }
.jo-table { border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; overflow: hidden; }
.jo-tr { display: grid; grid-template-columns: minmax(0, 2fr) 90px minmax(0, 1.4fr); gap: 10px; padding: 10px 14px; border-top: 1px solid var(--sh-line, var(--line)); font-size: 14px; align-items: start; }
.jo-tr small { display: block; color: var(--ink-soft); font-size: 12px; }
.jo-th { border-top: 0; background: color-mix(in srgb, var(--ink) 4%, transparent); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.jo-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 600; background: #eee; color: #444; }
.jo-pill--var { background: #fff1de; color: #a45300; } .jo-pill--fix { background: #e2f3e6; color: #1d6b2c; }
.jo-var { font-size: 13px; color: #a45300; font-weight: 600; }
.jo-terms { margin: 0; }
.jo-biz { padding: 14px 16px; border: 1px solid var(--sh-line, var(--line)); border-radius: 14px; }
.jo-biz p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }
.jo-biz-about { color: var(--ink-soft); }
@media (max-width: 960px) { .jo-row { grid-template-columns: 1fr 1fr; } .jo-row > input[data-f="label"], .jo-row > input[data-f="note"] { grid-column: 1 / -1; } .jo-row--terms { grid-template-columns: 1fr; } .jo-rm { justify-self: end; } }
/* expired and example posts */
.jo-card { position: relative; }
.jo-card.is-expired { opacity: 0.62; }
.jo-card.is-expired:hover { opacity: 0.9; }
.jo-badge { position: absolute; top: 14px; right: 14px; padding: 2px 10px; border-radius: 999px; background: #eee; color: #444; font-size: 11.5px; font-weight: 600; }
.jo-badge--exp { background: #fde7e4; color: #b3261e; }
.jo-card .jo-badge + .jo-badge { right: auto; left: auto; top: 38px; }
.jo-detail-badges { display: flex; gap: 8px; margin: 0 0 10px; }
.jo-detail-badges .jo-badge { position: static; }
.jo-closed { margin: 16px 0 0; padding: 12px 14px; border: 1px solid #f3c7c2; border-radius: 12px; background: #fdf1ef; color: #8a1f17; font-size: 14px; }
.jo-detail-badges { margin: 0; padding: 16px 24px 0; }
/* application and response forms: room to write */
.jo-detail textarea { box-sizing: border-box; width: 100%; min-height: 220px; height: auto; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.jo-detail .nb-f small { color: var(--ink-soft); font-size: 12.5px; }
.jo-detail .ef-grid3 { margin-top: 4px; }
.jo-detail input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14.5px; }

/* share link card */
.ef-linkrow { display: flex; gap: 8px; margin: 10px 0 0; }
.ef-linkrow input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--ink) 3%, var(--paper)); font: inherit; font-size: 13px; color: var(--ink); }
.ef-linkrow .tl-btn { height: 40px; flex: none; padding: 0 14px; min-height: 0; }
.ef-linkrow[hidden] { display: none; }
.ef-share .fd-note { margin: 10px 0 0; }

/* skill picker */
.sk-pick { margin: 0 0 14px; }
.sk-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sk-top input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14.5px; }
.sk-count { flex: none; font-size: 13px; color: var(--ink-soft); }
.sk-groups { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.sk-group { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--sh-line, var(--line)); border-radius: 999px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.sk-group.is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.sk-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 260px; overflow-y: auto; padding: 4px 2px; }
.sk-chip { padding: 7px 14px; border: 1px solid var(--sh-line, var(--line)); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.sk-chip:hover { border-color: var(--accent); }
.sk-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sk-none { margin: 0; color: var(--ink-soft); font-size: 14px; }

/* seats on the Team page */
.tm-seat-sum { display: grid; gap: 6px; max-width: 420px; margin: 10px 0 14px; }
.tm-seat-sum .mn-line { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line, #ececec); font-size: 15px; }
.tm-seat-need { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 106, 0, 0.08); color: #7a3300; }

/* a reference for a job on a résumé */
.ef-ref { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line, #ececec); border-radius: 14px; background: rgba(28, 28, 31, 0.025); }
.ef-ref-h { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.ef-ref-h small { display: block; margin-top: 2px; font-weight: 400; color: var(--ink-soft, #666); }
.ef-refline { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft, #555); }
.ef-refline b { color: var(--ink, #111); font-weight: 600; }

/* choosing a résumé style, and the personal information of the classic CV */
.ef-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ef-style-btn { display: grid; gap: 6px; align-content: start; justify-items: start; padding: 18px; border: 1.5px solid var(--line, #e4e4e4); border-radius: 18px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color 140ms ease, background 140ms ease; }
.ef-style-btn:hover { border-color: #ff9a3d; }
.ef-style-btn.is-on { border-color: #ff7a00; background: #fff7ee; box-shadow: 0 0 0 1px #ff7a00; }
.ef-style-btn b { font-size: 16px; font-weight: 600; }
.ef-style-btn small { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft, #666); }
.ef-style-ic { width: 54px; height: 70px; margin-bottom: 6px; border: 1px solid #d8d8d8; border-radius: 6px; background: #fff; position: relative; overflow: hidden; }
.ef-style-ic--modern { background: linear-gradient(90deg, #fff 64%, #f4efe9 64%); }
.ef-style-ic--modern::before { content: ""; position: absolute; left: 6px; top: 6px; width: 20px; height: 5px; border-radius: 3px; background: #1a1a1c; box-shadow: 0 9px 0 -1px #ff9a3d, 0 17px 0 -1px #cfcfcf, 0 24px 0 -1px #cfcfcf, 0 31px 0 -1px #cfcfcf; }
.ef-style-ic--classic::before { content: ""; position: absolute; left: 9px; right: 9px; top: 7px; height: 3px; background: #1a1a1c; box-shadow: 0 8px 0 #1a1a1c, 0 17px 0 -1px #9a9a9a, 0 23px 0 -1px #9a9a9a, 0 29px 0 -1px #9a9a9a, 0 35px 0 -1px #9a9a9a, 0 41px 0 -1px #9a9a9a; }
.ef-cv { display: grid; gap: 4px; }
.ef-cv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, auto); gap: 6px 18px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--line, #f0f0f0); }
.ef-cv-row .wk-mine { margin-bottom: 8px; }
@media (max-width: 640px) { .ef-cv-row { grid-template-columns: 1fr; } }

/* the preview is the real PDF, shown on an A4 page */
.ef-pdf-note { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft, #666); min-height: 18px; }
.ef-pdf { width: 100%; aspect-ratio: 210 / 297; border: 1px solid var(--line, #dcdcdc); border-radius: 10px; overflow: hidden; background: #e9e9ec; }
.ef-pdf iframe { width: 100%; height: 100%; border: 0; background: #e9e9ec; }
.ef-pdf-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ef-pdf-act .tl-btn { text-decoration: none; }

.ef-prev-bar { display: flex; margin: 0 0 12px; }
.ef-preview .dg-card { height: 520px; padding: 20px; }
.ef-preview .dg-kv > div { grid-template-columns: 1fr; }
.ef-preview .dg-hero { flex-direction: column; align-items: flex-start; }
.ef-preview .dg-tab { padding: 7px 13px; font-size: 13px; }

/* the compact top card: the résumé style as a dropdown, and the résumé's own photo */
.ef-rt { padding: 18px 22px; }
.ef-rt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px 36px; align-items: center; }
.ef-rt-style small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--ink-soft, #666); }
.ef-rt-photo { display: flex; align-items: center; gap: 14px; }
.ef-photo { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #ff7a00; color: #fff; font-size: 24px; font-weight: 600; }
.ef-photo img { width: 100%; height: 100%; object-fit: cover; }
.ef-rt-photo b { font-size: 15px; font-weight: 600; display: block; }
.ef-rt-photo small { display: block; margin: 2px 0 6px; font-size: 13px; color: var(--ink-soft, #666); }
.ef-photo-act { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ef-photo-act .wk-link { cursor: pointer; font-size: 13.5px; }
.ef-avpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, #ececec); }
.ef-av { width: 48px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 50%; overflow: hidden; background: none; cursor: pointer; }
.ef-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-av.is-on { border-color: #ff7a00; }
@media (max-width: 760px) { .ef-rt-grid { grid-template-columns: 1fr; } }
.ef-rt .tm-say:empty { display: none; }
.ef-rt .ef-avpick[hidden] { display: none; }

/* icon buttons for the résumé photo */
.ef-photo-act { display: flex; gap: 8px; margin-top: 6px; }
.ef-ib { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line, #dcdcdc); border-radius: 50%; background: #fff; color: var(--ink, #1a1a1c); cursor: pointer; transition: border-color 140ms ease, color 140ms ease, background 140ms ease; }
.ef-ib:hover, .ef-ib[aria-expanded="true"] { border-color: #ff7a00; color: #ff7a00; background: #fff7ee; }
.ef-ib:focus-visible { outline: 2px solid #ff7a00; outline-offset: 2px; }
.ef-rt-photo small { margin-bottom: 4px; }

/* toggles sit in even columns, so every group lines up */
.ef-toggles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 22px; align-items: center; }
.ef-toggles .wk-mine { margin: 0; min-height: 40px; white-space: nowrap; }
@media (max-width: 900px) { .ef-toggles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .ef-toggles { grid-template-columns: 1fr; } }

/* spacing for the toggle groups: the same space above every heading, and between every row */
.ef-card .ef-h3 { margin: 28px 0 14px; }
.ef-card .ef-h3:first-child { margin-top: 4px; }
.ef-toggles { gap: 16px 24px; }
.ef-toggles .wk-mine { min-height: 34px; }
.ef-toggles + .ef-h3 { margin-top: 30px; }

/* ===== more than one CV ===== */
.ef-cvbar { margin: 0 0 18px; }
.ef-cvtabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ef-cvtabs button { border: 1px solid #e3e3e3; background: #fff; color: #333; font: inherit; font-size: 14.5px; padding: 8px 14px; border-radius: 999px; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-cvtabs button.is-on { background: #ff7a00; border-color: #ff7a00; color: #fff; }
.ef-cvtabs .ef-cvnew { border-style: dashed; color: #c25a00; }
.ef-cvtabs .ef-cvnew:disabled { opacity: .45; cursor: not-allowed; }
.ef-cvnote { margin: 10px 0 0; font-size: 13.5px; color: #777; line-height: 1.5; }
.ef-cvedit { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.ef-cvedit input { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border: 1px solid #e3e3e3; border-radius: 10px; }
.ef-cvlinks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ef-cvlinks li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.ef-cvlinks b { flex: 0 0 90px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-cvlinks input.ef-cvurl { flex: 1; min-width: 160px; font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid #e3e3e3; border-radius: 8px; color: #555; }
.ef-cvoff { color: #777; }
.ef-cvgo { border: 0; background: none; padding: 0; font: inherit; color: #c25a00; cursor: pointer; text-decoration: underline; }
.ef-cvsw { flex: 0 0 auto; margin: 0; }
.ef-cvurl { flex: 1; min-width: 160px; }

.ef-hint { display: block; margin-top: 4px; font-size: 12.5px; color: #777; line-height: 1.45; }
.ef-addh { margin-top: 8px; padding: 6px 12px; font-size: 13px; }

/* ===== the three-dot menu on a folder ===== */
.fl-more { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; transition: background 140ms ease, color 140ms ease; }
.fl-more svg { fill: currentColor; }
.fl-more:hover, .fl-more[aria-expanded="true"] { background: rgba(24, 24, 28, .07); color: var(--ink); }
.fl-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-menu { position: fixed; z-index: 90; min-width: 240px; padding: 6px; border: 1px solid var(--sh-line, #e6e6ea); border-radius: 12px; background: var(--paper, #fff); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.fl-menu[hidden] { display: none; }
.fl-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.fl-menu button:hover, .fl-menu button:focus-visible { background: rgba(24, 24, 28, .06); outline: none; }
.fl-menu button.is-danger { color: #c0392b; }
.fl-menu hr { margin: 5px 6px; border: 0; border-top: 1px solid var(--sh-line, #e6e6ea); }

/* ===== the name-a-folder pop-up ===== */
.fl-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(20, 20, 24, .45); }
.fl-card { position: relative; width: min(420px, 100%); padding: 28px 26px 22px; border-radius: 18px; background: var(--paper, #fff); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); text-align: left; }
.fl-card-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.fl-card-x:hover { background: rgba(24, 24, 28, .07); color: var(--ink); }
.fl-card-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 12px; background: #f0f0f1; font-size: 24px; }
.fl-card h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.fl-card > p { margin: 0 0 16px; font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }
.fl-field { display: grid; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.fl-field input { height: 44px; padding: 0 14px; border: 1px solid var(--sh-line, #d9d9de); border-radius: 12px; background: var(--paper, #fff); font: inherit; font-size: 15px; color: var(--ink); }
.fl-field input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.fl-card .fl-err { margin: 8px 0 0; font-size: 13px; color: #c0392b; }
.fl-card-act { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.fl-menu button { display: flex; align-items: center; gap: 12px; }
.fl-menu button svg { flex: none; color: var(--ink-soft); }
.fl-menu button.is-danger svg { color: inherit; }
.fl-menu { min-width: 200px; }
.fl-card--pick { width: min(380px, 100%); }
.fl-card--pick h2 { margin-bottom: 16px; padding-right: 28px; overflow-wrap: anywhere; }
.fl-pick { display: grid; gap: 10px; }
.fl-pick-b { height: 48px; padding: 0 16px; border: 1px solid var(--sh-line, #d9d9de); border-radius: 12px; background: var(--paper, #fff); font: inherit; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.fl-pick-b:hover, .fl-pick-b:focus-visible { background: rgba(24, 24, 28, .06); outline: none; }
.fl-row[data-file] .fl-main { cursor: pointer; }
.fl-row[data-file] .fl-main:hover b { color: var(--accent); }

/* ===== preview pictures, upload progress, details ===== */
.fl-ic { width: 46px; height: 46px; }
.fl-ic--thumb { padding: 0; overflow: hidden; background: #f0f0f1; }
.fl-ic--thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
#flUps { display: grid; gap: 8px; margin: 0 0 12px; }
#flUps:empty { display: none; }
.fl-up { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--sh-line, #e6e6ea); border-radius: 14px; background: var(--paper, #fff); transition: opacity 400ms ease; }
.fl-up.is-gone { opacity: 0; }
.fl-up-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 10px; background: #f0f0f1; font-size: 11px; font-weight: 600; color: var(--ink-soft); overflow: hidden; }
.fl-up-ic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-up-main { display: grid; gap: 5px; flex: 1 1 auto; min-width: 0; }
.fl-up-main b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-up-main small { font-size: 12.5px; color: var(--ink-soft); }
.fl-up-bar { display: block; height: 6px; border-radius: 999px; background: rgba(24, 24, 28, .08); overflow: hidden; }
.fl-up-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #2b2b31; transition: width 160ms linear, background 200ms ease; }
.fl-up-st { flex: none; display: grid; place-items: center; min-width: 38px; height: 32px; box-sizing: border-box; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.fl-up[data-s="done"] .fl-up-bar i { background: #1f9d55; }
.fl-up[data-s="done"] .fl-up-st { width: 32px; min-width: 32px; aspect-ratio: 1; border-radius: 50%; background: #1f9d55; color: #fff; }
.fl-up[data-s="error"] .fl-up-bar { display: none; }
.fl-up[data-s="error"] small { color: #c0392b; }
.fl-up[data-s="error"] .fl-up-st { width: 32px; min-width: 32px; aspect-ratio: 1; border-radius: 50%; background: #c0392b; color: #fff; }
.fl-up[data-s="wait"] .fl-up-bar i { width: 0; }
.fl-card--info { width: min(440px, 100%); }
.fl-card--info h2 { margin-bottom: 14px; padding-right: 28px; overflow-wrap: anywhere; }
.fl-info-pic { display: block; width: 72px; height: 72px; margin-bottom: 12px; border-radius: 14px; object-fit: cover; background: #f0f0f1; }
.fl-dl { display: grid; grid-template-columns: 92px 1fr; gap: 10px 14px; margin: 0; font-size: 14px; }
.fl-dl dt { color: var(--ink-soft); }
.fl-dl dd { margin: 0; overflow-wrap: anywhere; }

/* on a phone the three dots stay on the same line as the name, so the rows are tight and even */
@media (max-width: 600px) {
  .fl-row { flex-wrap: nowrap; gap: 10px; padding: 10px 0; }
  .fl-row .fl-ctl { width: auto; flex: none; flex-wrap: nowrap; justify-content: flex-end; }
  .fl-more { margin-right: -6px; }
  .fl-up { gap: 10px; padding: 10px; }
}

/* the folder icon sits on the page itself, with no grey tile behind it */
.fl-ic:not(.fl-ic--file):not(.fl-ic--thumb) { background: none; font-size: 30px; }

/* ===== choosing several files and folders ===== */
.fl-selbar { position: sticky; top: calc(var(--sh-top, 60px) + 10px); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 12px; padding: 8px 8px 8px 16px; border: 1px solid var(--sh-line, #e6e6ea); border-radius: 16px; background: var(--paper, #fff); box-shadow: 0 6px 22px rgba(0, 0, 0, .1); }
.fl-selbar[hidden] { display: none; }
.fl-selbar-n { font-size: 14px; font-weight: 600; }
.fl-selbar-b { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-sb { height: 36px; padding: 0 14px; border: 1px solid var(--sh-line, #d9d9de); border-radius: 999px; background: none; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.fl-sb:hover:not(:disabled) { background: rgba(24, 24, 28, .06); }
.fl-sb:disabled { opacity: .4; cursor: default; }
.fl-sb.is-danger { color: #c0392b; }
.fl-sb--done { border-color: transparent; background: #18181c; color: #fff; }
.fl-sb--done:hover:not(:disabled) { background: #2b2b31; }
.fl-selecting .fl-more { display: none; }
.fl-selecting .fl-row { cursor: pointer; }
.fl-row.is-sel { background: rgba(24, 24, 28, .045); border-radius: 12px; }
.fl-sel { flex: none; margin: 0 !important; padding: 0 0 0 6px; }
.fl-sel input[type="checkbox"] { transform: scale(.82); transform-origin: left center; margin-right: -8px !important; }
@media (max-width: 600px) { .fl-selbar { padding: 8px; } .fl-selbar-n { padding-left: 8px; } .fl-sb { height: 34px; padding: 0 12px; } }

/* a closer menu */
.fl-menu { padding: 5px; min-width: 190px; }
.fl-menu button { padding: 6px 10px; gap: 10px; font-size: 13.5px; line-height: 1.3; }
.fl-menu hr { margin: 4px 6px; }

/* the move pop-up keeps one size whatever is chosen: the list scrolls inside a fixed height, the buttons never move */
.fl-card--move { display: flex; flex-direction: column; width: min(440px, 100%); height: min(560px, calc(100vh - 32px)); padding: 24px 22px 18px; }
.fl-card--move h2 { flex: none; margin: 0 0 14px; padding-right: 30px; font-size: 18px; overflow-wrap: anywhere; }
.fl-mv-find { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; margin-bottom: 10px; padding: 0 14px; border: 1px solid var(--sh-line, #d9d9de); border-radius: 12px; color: var(--ink-soft); }
.fl-mv-find:focus-within { outline: 2px solid var(--accent); border-color: transparent; }
.fl-mv-find input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; font: inherit; font-size: 15px; color: var(--ink); }
.fl-mv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; overscroll-behavior: contain; }
.fl-mv-row { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 12px; border: 0; border-radius: 12px; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.fl-mv-row:hover:not(:disabled) { background: rgba(24, 24, 28, .06); }
.fl-mv-row.is-on { background: rgba(24, 24, 28, .08); }
.fl-mv-row:disabled { opacity: .45; cursor: default; }
.fl-mv-ic { flex: none; font-size: 24px; line-height: 1; }
.fl-mv-t { display: grid; flex: 1 1 auto; min-width: 0; }
.fl-mv-t b { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-mv-t small { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-mv-tick { flex: none; visibility: hidden; color: var(--ink); }
.fl-mv-row.is-on .fl-mv-tick { visibility: visible; }
.fl-mv-none { margin: 20px 8px; font-size: 14px; color: var(--ink-soft); }
.fl-card--move .fl-card-act { flex: none; margin-top: 14px; }
.fl-modal { z-index: 500; }
.fl-mv-find:focus-within { outline: none; border-color: rgba(24, 24, 28, .35); }
.fl-mv-find input:focus, .fl-mv-find input:focus-visible { outline: none; box-shadow: none; border: 0; }

/* ===== marking a row, and drag and drop ===== */
.fl-row { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.fl-row.is-focus { background: rgba(24, 24, 28, .045); border-radius: 12px; }
.fl-row.is-dragging { opacity: .4; }
.fl-row.is-drop { background: rgba(24, 24, 28, .09); border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(24, 24, 28, .4); }
#flCrumbs .is-drop { background: rgba(24, 24, 28, .1); border-radius: 6px; box-shadow: 0 0 0 4px rgba(24, 24, 28, .1); }
body.fl-dragging, body.fl-dragging * { cursor: grabbing !important; }
.fl-ghost { position: fixed; left: 0; top: 0; z-index: 600; display: flex; align-items: center; gap: 10px; max-width: 260px; padding: 6px 14px 6px 6px; border: 1px solid var(--sh-line, #e6e6ea); border-radius: 12px; background: var(--paper, #fff); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); pointer-events: none; will-change: transform; }
.fl-ghost .fl-ic { width: 36px; height: 36px; font-size: 22px; }
.fl-ghost b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* drag and drop: a soft, light shade only, no coloured outline */
.fl-row.is-drop { background: rgba(24, 24, 28, .035); box-shadow: inset 0 0 0 1px rgba(24, 24, 28, .1); }
#flCrumbs .is-drop { background: rgba(24, 24, 28, .05); box-shadow: none; }
.fl-row.is-dragging, .fl-row.is-dragging *, .fl-row.is-drop, .fl-row.is-drop * { outline: none !important; }
.fl-row.is-dragging { opacity: .45; }

/* the drop target is only shaded slightly: no outline, no border */
.fl-row.is-drop { background: rgba(24, 24, 28, .04); box-shadow: none; border-radius: 0; border-left: 0; border-right: 0; }
#flCrumbs .is-drop { box-shadow: none; }

/* a marked or chosen row is shaded across the full width, lightly: no rounded box */
.fl-row.is-focus, .fl-row.is-sel { background: rgba(24, 24, 28, .04); border-radius: 0; box-shadow: none; }
.fl-row img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }