/* Design direction A, "Calm office" (ADR 0036; mockups in docs/design/2026-10-ui-proposal); Rubik headings (ADR 0045). */
@font-face { font-family: "Rubik"; font-weight: 300 900; font-display: swap;
  src: url(/static/fonts/rubik-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Rubik"; font-weight: 300 900; font-display: swap;
  src: url(/static/fonts/rubik-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Assistant"; font-weight: 200 800; font-display: swap;
  src: url(/static/fonts/assistant-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-weight: 200 800; font-display: swap;
  src: url(/static/fonts/assistant-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --head-font: "Rubik", system-ui, sans-serif; --body-font: "Assistant", system-ui, sans-serif;
  --bg: #F6F3EE; --side: #EFEAE2; --surface: #FFFFFF; --paper: #FFFEFB;
  --ink: #1F2A2A; --muted: #6E726C; --line: #E6E1D8;
  --accent: #1F5C54; --accent-soft: #E3EEEA; --on-accent: #FFFFFF;
  --ok: #2F7A4B; --ok-soft: #E4F1E8; --warn: #9A5B13; --warn-soft: #FBF0DF;
  --err: #A63A2B; --err-soft: #F8E6E2;
  --radius: 14px; --btn-radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.55 var(--body-font); }
a { color: var(--accent); }
h1, h2 { font-family: var(--head-font); line-height: 1.25; }
h1 { font-size: 28px; font-weight: 600; margin: 0 0 16px; }
h2 { font-size: 19px; font-weight: 600; margin: 24px 0 10px; }
.ic { width: 20px; height: 20px; flex: none; }

/* Layout: a side menu on the right; bottom tabs on a phone. */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 16px;
  background: var(--side); border-inline-end: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; }
.mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font: 700 18px/1 var(--head-font); }
img.mark { display: block; background: none; } /* the placeholder logo (ADR 0042) */
.word { font: 700 20px/1 var(--head-font); }
.side .brand { flex-wrap: wrap; row-gap: 2px; }
.role { flex-basis: 100%; color: var(--muted); font-size: 13px; padding-inline-start: 42px; margin-top: -2px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: #4A514D; font-weight: 600; text-decoration: none; }
.nav-item:hover { background: rgba(255, 255, 255, .55); }
.nav-item.on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.count { margin-inline-start: auto; font-size: 12px; min-width: 22px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); text-align: center; }
.me { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 8px; font-size: 14px; color: var(--muted); }
.me .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px; flex: none; }
main { padding: 32px 40px 56px; max-width: 1100px; width: 100%; }
main.bare { max-width: none; padding: 0; }
.mobile-top { display: none; }

/* Surfaces */
.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin: 16px 0; }
.narrow { max-width: 26rem; margin: 4rem auto; text-align: center; }
.meta, .muted { color: var(--muted); }
.small { font-size: 14px; }
.error, .ok, .notice { padding: 10px 14px; border-radius: 10px; }
.error { color: var(--err); background: var(--err-soft); }
.ok { color: var(--ok); background: var(--ok-soft); }
.notice { color: var(--warn); background: var(--warn-soft); }
td .error, td .ok { padding: 0; background: none; }

/* Tables sit on a white panel with quiet dividers. */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: start; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; font-weight: 600; color: var(--muted); background: #FBF9F5; }
tr:last-child td { border-bottom: 0; }

/* Forms */
label { display: block; margin: 12px 0; font-weight: 600; }
label.check { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: 18px; font-weight: 400; }
input[type=text], input[type=time], input[type=file], textarea, select { display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--btn-radius); font: 400 16px/1.5 var(--body-font); color: var(--ink); background: var(--paper); }
input[type=time] { width: auto; }
/* What people type keeps its own direction (Hebrew in an English page, and the reverse). */
input[type=text], textarea { unicode-bidi: plaintext; text-align: start; }
.lang-switch { margin-top: 18px; font-size: 14px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
fieldset { border: 0; padding: 0; margin: 0; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > label { flex: 1 1 12rem; }
.row > label.check { flex: 0 0 auto; }
fieldset > p:not(.muted) { font: 700 17px/1.3 var(--head-font); margin: 26px 0 8px; }
fieldset > button { display: block; margin-top: 22px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
button, .button { display: inline-block; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  border-radius: var(--btn-radius); padding: 9px 18px; font: 600 15px/1.4 var(--body-font); cursor: pointer; text-decoration: none; }
button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
button.link { background: none; border: 0; color: var(--accent); padding: 0; font-weight: 600; }
button.danger { background: none; border-color: transparent; color: var(--err); }
form.inline { display: inline-flex; gap: .75rem; align-items: center; }
pre { white-space: pre-wrap; font: inherit; }
ol.small { padding-inline-start: 1.4rem; color: var(--muted); }

/* Inbox: what GuKa sorted (mockup direction A). */
:root { --cat-client: #2F6FA8; --cat-lead: #C0832B; --cat-court: #8E3B46; --cat-vendor: #6E7B5B;
  --cat-other: #9A968D; --cat-finance: #8E3B46; --cat-personal: #7A5C99; --cat-spam: #B3402F; --cat-custom: #4F7C82;
  --judg: #6B3FA0; --judg-soft: #EFE7F7; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 8px 0 18px; }
.stat { display: flex; flex-direction: column; padding: 4px 16px; border-inline-start: 2px solid var(--line);
  color: inherit; text-decoration: none; }
.stat b { font: 700 26px/1.1 var(--head-font); color: var(--accent); }
.stat span { color: var(--muted); font-size: 13.5px; }
.chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface);
  padding: 6px 13px; border-radius: 999px; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.chip b { color: var(--muted); font-weight: 600; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .chip.on b { color: inherit; opacity: .75; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tag i, .chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--cat-custom)); display: inline-block; }
.c-client { --c: var(--cat-client); } .c-lead { --c: var(--cat-lead); } .c-court { --c: var(--cat-court); }
.c-vendor { --c: var(--cat-vendor); } .c-other { --c: var(--cat-other); } .c-finance { --c: var(--cat-finance); }
.c-personal { --c: var(--cat-personal); } .c-spam { --c: var(--cat-spam); }
.tag.label { background: var(--surface-2, transparent); border: 1px solid var(--line, #d8d4cb); color: inherit; }
.badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.b-high { background: var(--err-soft); color: var(--err); }
.b-judg { background: var(--judg-soft); color: var(--judg); }
.st-draft { background: var(--accent-soft); color: var(--accent); }
.st-sent { background: var(--ok-soft); color: var(--ok); }
.st-warn { background: var(--warn-soft); color: var(--warn); }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.row { display: grid; grid-template-columns: 170px 1fr auto 64px; gap: 16px; align-items: center; padding: 13px 18px;
  border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.row:last-child { border-bottom: 0; }
.row:hover { background: #F1F6F3; }
.row .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .what { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row .what b { font-weight: 600; } .row .snip { color: var(--muted); }
.row .tags { display: flex; gap: 8px; align-items: center; }
.row .when { color: var(--muted); font-size: 13px; text-align: end; }
/* A message and what GuKa did with it */
.crumbs { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.split { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.split .card { margin: 0; }
.mail h1 { font-size: 24px; }
.from { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.avatar.lg { width: 42px; height: 42px; font-size: 18px; }
.mail-body { white-space: pre-wrap; font-size: 16px; line-height: 1.75; padding: 14px 0; overflow-wrap: anywhere; }
.agent h2 { margin-top: 0; }
.steps { list-style: none; margin: 0 0 18px; padding: 0; }
.steps li { position: relative; padding-inline-start: 28px; padding-bottom: 16px; display: flex; flex-direction: column; }
.steps li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ok); }
.steps li::after { content: ""; position: absolute; inset-inline-start: 9px; top: 20px; bottom: 2px; width: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps li.now::before { background: var(--surface); border: 3px solid var(--accent); width: 8px; height: 8px; }
.steps li.warn::before { background: var(--warn); }
.steps span { color: var(--muted); font-size: 14px; }
.button.block { display: block; text-align: center; }
.button.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.center { text-align: center; }
.refile { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 8px; }

/* Calendar: the week, read live from Google (mockup direction A). */
.cal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cal-wrap { display: grid; grid-template-columns: 1fr 290px; gap: 20px; align-items: start; }
.cal { --slot: 23px; display: grid; grid-template-columns: 56px repeat(var(--days, 5), 1fr); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal.days-1 { --days: 1; } .cal.days-2 { --days: 2; } .cal.days-3 { --days: 3; } .cal.days-4 { --days: 4; }
.cal.days-5 { --days: 5; } .cal.days-6 { --days: 6; } .cal.days-7 { --days: 7; }
.cal .hours { display: grid; padding-top: 77px; }
.cal .hr { font-size: 12px; color: var(--muted); text-align: center; grid-row-end: span 2; transform: translateY(-8px); }
.cal .day { border-inline-start: 1px solid var(--line); min-width: 0; }
.cal .dh { height: 44px; display: grid; place-items: center; font-weight: 700; border-bottom: 1px solid var(--line); }
.cal .dh.today { color: var(--accent); background: var(--accent-soft); }
.cal .band { height: 32px; padding: 4px; border-bottom: 1px solid var(--line); overflow: hidden; }
.cal .allday { font-size: 11.5px; padding: 3px 6px; border-radius: 6px; background: var(--warn-soft); color: var(--warn);
  font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .slots { display: grid; position: relative;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2 * var(--slot) - 1px),
    var(--line) calc(2 * var(--slot) - 1px), var(--line) calc(2 * var(--slot))); }
.ev { grid-column: 1; margin: 1px 4px; border-radius: 8px; padding: 4px 8px; font-size: 12.5px; display: flex;
  flex-direction: column; overflow: hidden; border-inline-start: 3px solid var(--c, var(--cat-custom));
  background: color-mix(in srgb, var(--c, var(--cat-custom)) 14%, var(--surface)); min-height: 0; }
.ev b { font-weight: 600; line-height: 1.3; } .ev span { color: var(--muted); font-size: 11.5px; }
.ev.of-2.lane-0 { margin-inline-end: 50%; } .ev.of-2.lane-1 { margin-inline-start: 50%; }
.ev.of-3.lane-0 { margin-inline-end: 66%; } .ev.of-3.lane-1 { margin-inline-start: 34%; margin-inline-end: 33%; }
.ev.of-3.lane-2 { margin-inline-start: 67%; }
.k-hearing, .k-mediation { --c: var(--cat-court); } .k-deadline { --c: var(--cat-finance); }
.k-meeting { --c: var(--cat-client); }
.reminders h2 { margin-top: 0; }
.rem { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rem:last-child { border-bottom: 0; }
.rem span { color: var(--muted); font-size: 13px; }
/* Calendar grid placements (ADR 0041): the CSP allows no inline styles. */
.rows-2 { grid-template-rows: repeat(2, var(--slot)); } .rows-3 { grid-template-rows: repeat(3, var(--slot)); } .rows-4 { grid-template-rows: repeat(4, var(--slot)); } .rows-5 { grid-template-rows: repeat(5, var(--slot)); } .rows-6 { grid-template-rows: repeat(6, var(--slot)); } .rows-7 { grid-template-rows: repeat(7, var(--slot)); } .rows-8 { grid-template-rows: repeat(8, var(--slot)); } .rows-9 { grid-template-rows: repeat(9, var(--slot)); } .rows-10 { grid-template-rows: repeat(10, var(--slot)); } .rows-11 { grid-template-rows: repeat(11, var(--slot)); } .rows-12 { grid-template-rows: repeat(12, var(--slot)); } .rows-13 { grid-template-rows: repeat(13, var(--slot)); } .rows-14 { grid-template-rows: repeat(14, var(--slot)); } .rows-15 { grid-template-rows: repeat(15, var(--slot)); } .rows-16 { grid-template-rows: repeat(16, var(--slot)); } .rows-17 { grid-template-rows: repeat(17, var(--slot)); } .rows-18 { grid-template-rows: repeat(18, var(--slot)); } .rows-19 { grid-template-rows: repeat(19, var(--slot)); } .rows-20 { grid-template-rows: repeat(20, var(--slot)); } .rows-21 { grid-template-rows: repeat(21, var(--slot)); } .rows-22 { grid-template-rows: repeat(22, var(--slot)); } .rows-23 { grid-template-rows: repeat(23, var(--slot)); } .rows-24 { grid-template-rows: repeat(24, var(--slot)); } .rows-25 { grid-template-rows: repeat(25, var(--slot)); } .rows-26 { grid-template-rows: repeat(26, var(--slot)); } .rows-27 { grid-template-rows: repeat(27, var(--slot)); } .rows-28 { grid-template-rows: repeat(28, var(--slot)); } .rows-29 { grid-template-rows: repeat(29, var(--slot)); } .rows-30 { grid-template-rows: repeat(30, var(--slot)); } .rows-31 { grid-template-rows: repeat(31, var(--slot)); } .rows-32 { grid-template-rows: repeat(32, var(--slot)); } .rows-33 { grid-template-rows: repeat(33, var(--slot)); } .rows-34 { grid-template-rows: repeat(34, var(--slot)); } .rows-35 { grid-template-rows: repeat(35, var(--slot)); } .rows-36 { grid-template-rows: repeat(36, var(--slot)); } .rows-37 { grid-template-rows: repeat(37, var(--slot)); } .rows-38 { grid-template-rows: repeat(38, var(--slot)); } .rows-39 { grid-template-rows: repeat(39, var(--slot)); } .rows-40 { grid-template-rows: repeat(40, var(--slot)); } .rows-41 { grid-template-rows: repeat(41, var(--slot)); } .rows-42 { grid-template-rows: repeat(42, var(--slot)); } .rows-43 { grid-template-rows: repeat(43, var(--slot)); } .rows-44 { grid-template-rows: repeat(44, var(--slot)); } .rows-45 { grid-template-rows: repeat(45, var(--slot)); } .rows-46 { grid-template-rows: repeat(46, var(--slot)); } .rows-47 { grid-template-rows: repeat(47, var(--slot)); } .rows-48 { grid-template-rows: repeat(48, var(--slot)); }
.r-1 { grid-row-start: 1; } .r-2 { grid-row-start: 2; } .r-3 { grid-row-start: 3; } .r-4 { grid-row-start: 4; } .r-5 { grid-row-start: 5; } .r-6 { grid-row-start: 6; } .r-7 { grid-row-start: 7; } .r-8 { grid-row-start: 8; } .r-9 { grid-row-start: 9; } .r-10 { grid-row-start: 10; } .r-11 { grid-row-start: 11; } .r-12 { grid-row-start: 12; } .r-13 { grid-row-start: 13; } .r-14 { grid-row-start: 14; } .r-15 { grid-row-start: 15; } .r-16 { grid-row-start: 16; } .r-17 { grid-row-start: 17; } .r-18 { grid-row-start: 18; } .r-19 { grid-row-start: 19; } .r-20 { grid-row-start: 20; } .r-21 { grid-row-start: 21; } .r-22 { grid-row-start: 22; } .r-23 { grid-row-start: 23; } .r-24 { grid-row-start: 24; } .r-25 { grid-row-start: 25; } .r-26 { grid-row-start: 26; } .r-27 { grid-row-start: 27; } .r-28 { grid-row-start: 28; } .r-29 { grid-row-start: 29; } .r-30 { grid-row-start: 30; } .r-31 { grid-row-start: 31; } .r-32 { grid-row-start: 32; } .r-33 { grid-row-start: 33; } .r-34 { grid-row-start: 34; } .r-35 { grid-row-start: 35; } .r-36 { grid-row-start: 36; } .r-37 { grid-row-start: 37; } .r-38 { grid-row-start: 38; } .r-39 { grid-row-start: 39; } .r-40 { grid-row-start: 40; } .r-41 { grid-row-start: 41; } .r-42 { grid-row-start: 42; } .r-43 { grid-row-start: 43; } .r-44 { grid-row-start: 44; } .r-45 { grid-row-start: 45; } .r-46 { grid-row-start: 46; } .r-47 { grid-row-start: 47; } .r-48 { grid-row-start: 48; }
.h-1 { grid-row-end: span 1; } .h-2 { grid-row-end: span 2; } .h-3 { grid-row-end: span 3; } .h-4 { grid-row-end: span 4; } .h-5 { grid-row-end: span 5; } .h-6 { grid-row-end: span 6; } .h-7 { grid-row-end: span 7; } .h-8 { grid-row-end: span 8; } .h-9 { grid-row-end: span 9; } .h-10 { grid-row-end: span 10; } .h-11 { grid-row-end: span 11; } .h-12 { grid-row-end: span 12; } .h-13 { grid-row-end: span 13; } .h-14 { grid-row-end: span 14; } .h-15 { grid-row-end: span 15; } .h-16 { grid-row-end: span 16; } .h-17 { grid-row-end: span 17; } .h-18 { grid-row-end: span 18; } .h-19 { grid-row-end: span 19; } .h-20 { grid-row-end: span 20; } .h-21 { grid-row-end: span 21; } .h-22 { grid-row-end: span 22; } .h-23 { grid-row-end: span 23; } .h-24 { grid-row-end: span 24; } .h-25 { grid-row-end: span 25; } .h-26 { grid-row-end: span 26; } .h-27 { grid-row-end: span 27; } .h-28 { grid-row-end: span 28; } .h-29 { grid-row-end: span 29; } .h-30 { grid-row-end: span 30; } .h-31 { grid-row-end: span 31; } .h-32 { grid-row-end: span 32; } .h-33 { grid-row-end: span 33; } .h-34 { grid-row-end: span 34; } .h-35 { grid-row-end: span 35; } .h-36 { grid-row-end: span 36; } .h-37 { grid-row-end: span 37; } .h-38 { grid-row-end: span 38; } .h-39 { grid-row-end: span 39; } .h-40 { grid-row-end: span 40; } .h-41 { grid-row-end: span 41; } .h-42 { grid-row-end: span 42; } .h-43 { grid-row-end: span 43; } .h-44 { grid-row-end: span 44; } .h-45 { grid-row-end: span 45; } .h-46 { grid-row-end: span 46; } .h-47 { grid-row-end: span 47; } .h-48 { grid-row-end: span 48; }

/* Preferences: one row per category. */
table.categories td { vertical-align: middle; }
table.categories input[type=text], table.categories textarea { margin-top: 0; }
table.categories td:nth-child(1) { width: 22%; } table.categories td:nth-child(2) { width: 54%; }
table.categories tr.new td { background: #FBF9F5; }

/* Approvals: the draft reads like a letter. */
.approval .meta { margin: 0 0 4px; font-size: 14px; }
.approval textarea[name=body_text] { background: var(--paper); font-size: 16px; line-height: 1.75; min-height: 16rem; }
.kind { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.page-sub { color: var(--muted); margin: -8px 0 20px; }

/* Sign-in */
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-card { display: flex; flex-direction: column; justify-content: center; padding: 0 12%; gap: 12px; }
.login-card .brand { padding: 0; }
.login-card .mark { width: 44px; height: 44px; font-size: 24px; border-radius: 12px; }
.login-card .word { font-size: 28px; }
.login-card h1 { font-size: 40px; margin: 8px 0 0; }
.login-card .lead { font-size: 18px; color: var(--muted); max-width: 30ch; margin: 0; }
.login-card .button { align-self: flex-start; padding: 13px 26px; font-size: 16px; margin-top: 12px; }
.login-art { background: #E7EEEA; display: grid; place-items: center; position: relative; }
.art-card { background: var(--surface); border-radius: 16px; padding: 18px 22px; width: 280px; display: flex; flex-direction: column;
  gap: 4px; box-shadow: 0 20px 50px rgba(0, 0, 0, .12); transform: translate(30px, -40px) rotate(-2deg); }
.art-card.two { position: absolute; transform: translate(-50px, 70px) rotate(2deg); }
.art-card .dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.art-card .dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.dot.client { --dot: #2F6FA8; } .dot.lead { --dot: #C0832B; }
.art-card span:last-child { color: var(--muted); font-size: 14px; }

@media (max-width: 700px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; inset: auto 0 0 0; top: auto; height: auto; z-index: 5; padding: 6px; flex-direction: row;
    border-inline-end: 0; border-top: 1px solid var(--line); }
  .side .brand, .side .me, .nav-item span { display: none; }
  .mobile-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
    background: var(--side); border-bottom: 1px solid var(--line); }
  .mobile-top .brand { padding: 0; }
  .side nav { flex-direction: row; justify-content: space-around; width: 100%; }
  .nav-item { padding: 10px 14px; }
  .count { position: absolute; top: 2px; left: 2px; margin: 0; min-width: 18px; padding: 0 5px; font-size: 10px; }
  main { padding: 20px 16px 90px; }
  h1 { font-size: 24px; }
  .login { grid-template-columns: 1fr; } .login-art { display: none; }
  .login-card { padding: 48px 24px; }
  .summary { grid-template-columns: 1fr 1fr; }
  .split, .cal-wrap { grid-template-columns: 1fr; }
  .cal { overflow-x: auto; }
  .row { grid-template-columns: 1fr auto; gap: 6px 12px; } .row .when { grid-row: 1; grid-column: 2; }
  .row .what { grid-column: 1 / -1; } .row .tags { grid-column: 1 / -1; flex-wrap: wrap; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  td { border: 0; padding: 4px 16px; }
}