/* The brokerage look (a layer over the plain console; Jordon's second design, 2026-10-05): airy white and aqua, deep teal for
 * what acts, big calm type. Yacht pictures are placeholders (a drawn sea) until the designed ones exist. */
body.look-brokerage {
  --bg: #f3f9fa; --rail: #fbfdfd; --panel: #ffffff; --hover: #eef6f7; --line: rgba(10,40,48,.08); --line-strong: rgba(10,40,48,.16);
  --ink: #0a1e25; --muted: #557079; --faint: #8aa1a8; --track: #e6f0f1;
  --acc: #0e5f6b; --acc-text: #0e5f6b; --acc-soft: #dcf0f2; --acc-line: rgba(14,95,107,.28);
  --warn: #c98a2b; --warn-soft: #f7efe2; --warn-line: rgba(201,138,43,.35); --warn-text: #8a5a12;
  --r-sm: 12px; --r: 16px; --r-lg: 22px;
  --shadow: 0 1px 2px rgba(10,40,48,.04), 0 18px 40px -22px rgba(10,40,48,.18);
  background: var(--bg);
}
.look-brokerage .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.look-brokerage .ic.sm { width: 16px; height: 16px; }
.look-brokerage .ic.big { width: 44px; height: 44px; }

/* The sidebar, foldable to its icons. */
.look-brokerage .app { grid-template-columns: 248px 1fr; transition: grid-template-columns .2s ease; }
.look-brokerage .app.rail-collapsed { grid-template-columns: 76px 1fr; }
.look-brokerage .rail { background: var(--rail); padding: 26px 14px 18px; gap: 6px; }
.look-brokerage .brand { display: block; padding: 0 10px 22px; }
.look-brokerage .brand-word { font-weight: 700; letter-spacing: -.02em; font-size: 22px; }
.look-brokerage .brand-word span { color: var(--acc); }
.look-brokerage .brand-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.look-brokerage .brand-name { display: block; color: var(--faint); font-size: 12px; font-weight: 500; margin-top: 6px; }
.look-brokerage .rail-toggle { position: absolute; top: 26px; right: 10px; border: 0; background: none; color: var(--faint); cursor: pointer; padding: 4px; border-radius: 8px; }
.look-brokerage .rail { position: sticky; }
.look-brokerage .rail-toggle:hover { color: var(--ink); background: var(--hover); }
.look-brokerage .nav { gap: 14px; padding: 11px 14px; border-radius: 14px; color: #2b4750; font-weight: 500; font-size: 15px; }
.look-brokerage .nav:hover { background: var(--hover); color: var(--ink); }
.look-brokerage .nav.on { background: var(--acc-soft); color: var(--ink); }
.look-brokerage .nav .badge { margin-left: auto; background: #ef7d6a; color: #fff; border-radius: 999px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: 12px; padding: 0 6px; }
/* Red only when something is late or due today (TASK-232, item 13); grey otherwise. */
.look-brokerage .nav .badge.calm { background: var(--track, #dfe8eb); color: var(--muted, #52707a); }
.look-brokerage .nav.sub { padding: 7px 14px 7px 50px; font-size: 13px; }
.look-brokerage .rail-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 6px; }
.look-brokerage .me { padding: 6px 12px; }
.look-brokerage .rail-collapsed .nav-label, .look-brokerage .rail-collapsed .brand-sub, .look-brokerage .rail-collapsed .brand-name, .look-brokerage .rail-collapsed .me, .look-brokerage .rail-collapsed .nav .badge, .look-brokerage .rail-collapsed .nav.sub { display: none; }
.look-brokerage .rail-collapsed .brand-word { font-size: 0; }
.look-brokerage .rail-collapsed .brand-word::before { content: 'CD'; font-size: 18px; letter-spacing: -.02em; }
.look-brokerage .rail-collapsed .rail-toggle { position: static; margin: 0 auto 10px; }
.look-brokerage .rail-collapsed .nav { justify-content: center; padding: 12px; }

/* The top bar and the page header. */
.look-brokerage .main { padding: 0 34px 40px; }
.look-brokerage .topbar { display: flex; align-items: center; gap: 18px; padding: 18px 0 10px; }
.look-brokerage .crumbs { display: flex; gap: 10px; color: var(--muted); font-size: 14px; }
.look-brokerage .back-btn { padding: 8px 12px 8px 8px; gap: 4px; font-size: 14px; }
.look-brokerage .back-btn:hover { background: var(--hover); }
.look-brokerage .crumb-here { color: var(--ink); font-weight: 500; }
.look-brokerage .topsearch { margin-left: auto; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px; padding: 0 14px; width: min(460px, 40vw); color: var(--faint); }
.look-brokerage .topsearch input { border: 0; outline: 0; background: none; font: inherit; padding: 11px 0; width: 100%; color: var(--ink); }
.look-brokerage .btn { border-radius: 12px; padding: 10px 16px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); cursor: pointer; }
.look-brokerage .btn.primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.look-brokerage .btn.primary:hover { background: #0b4f59; }
.look-brokerage .btn.new { padding: 11px 18px; }
.look-brokerage .top h1 { font-size: 34px; letter-spacing: -.02em; }
.look-brokerage.on-day .top { display: none; }
.look-brokerage .chip { border-radius: 999px; padding: 3px 10px; font-size: 12.5px; background: var(--track); color: #2b4750; font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.look-brokerage .chip.ok { background: var(--acc-soft); color: var(--acc); }
.look-brokerage .chip.warn { background: var(--warn-soft); color: var(--warn-text); }
.look-brokerage .chip.risk { background: var(--risk-soft); color: var(--risk-text); }
.look-brokerage .panel { border-radius: var(--r-lg); box-shadow: var(--shadow); border: 1px solid var(--line); }

/* My day. */
.look-brokerage .day { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.look-brokerage .day-main { display: grid; gap: 20px; }
.look-brokerage .hello { padding: 18px 0 4px; }
.look-brokerage .kicker { font-size: 12.5px; letter-spacing: .14em; color: var(--muted); font-weight: 500; text-transform: uppercase; }
/* Page headers (TASK-232, item 16; Jordon: "make smaller but keep modern/cool"): the kicker and the flavour stay, the
   title a line; the big greeting only on My day. */
.look-brokerage .hello h1 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.025em; margin: 6px 0 4px; font-weight: 700; }
.look-brokerage .lede { font-size: 15.5px; color: var(--muted); margin: 0 0 10px; letter-spacing: -.01em; }
.look-brokerage .hello.greet h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.02; letter-spacing: -.035em; margin: 8px 0 6px; }
.look-brokerage .hello.greet .lede { font-size: clamp(18px, 2vw, 26px); margin: 0 0 14px; }
.look-brokerage .summary { display: inline-flex; align-items: center; gap: 10px; color: #2b4750; background: var(--acc-soft); padding: 8px 14px; border-radius: 12px; margin: 0; }
.look-brokerage .dot-sep { color: var(--faint); }
.look-brokerage .card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.look-brokerage .card-head h2 { margin: 0; font-size: 22px; letter-spacing: -.015em; white-space: nowrap; }
.look-brokerage .view-all { white-space: nowrap; }
.look-brokerage .segs { margin-left: auto; display: inline-flex; background: var(--hover); border-radius: 12px; padding: 3px; }
.look-brokerage .seg { border: 0; background: none; padding: 7px 16px; border-radius: 10px; color: var(--muted); cursor: pointer; font-size: 13.5px; }
.look-brokerage .seg.on { background: var(--acc-soft); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(10,40,48,.06); }
.look-brokerage .view-all, .look-brokerage .open, .look-brokerage .more-link { display: inline-flex; align-items: center; gap: 6px; color: var(--acc); text-decoration: none; font-weight: 500; }
.look-brokerage .moves { display: grid; }
.look-brokerage .move { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.look-brokerage .move:first-child { border-top: 0; }
.look-brokerage .move-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; }
.look-brokerage .move-text { display: grid; gap: 2px; min-width: 0; }
.look-brokerage .move-text b { font-size: 17px; letter-spacing: -.01em; }
.look-brokerage .foot { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.look-brokerage .more-link { padding: 12px 0 0; }
.look-brokerage .deals { display: grid; gap: 12px; }
.look-brokerage .deal { display: grid; grid-template-columns: minmax(0, 1fr) 42%; min-height: 108px; border-radius: 18px; overflow: hidden; background: #f7fbfc; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.look-brokerage .deal:hover { border-color: var(--line-strong); }
.look-brokerage .deal-text { display: grid; gap: 3px; padding: 14px 18px; align-content: center; }
.look-brokerage .deal-text b { font-size: 18px; letter-spacing: -.01em; }
.look-brokerage .deal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.look-brokerage .deal-img { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.look-brokerage .in-motion { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 13px 16px; border-radius: 14px; background: var(--acc-soft); text-decoration: none; color: var(--ink); }

/* The drawn sea: a placeholder for the designed yacht pictures. */
.look-brokerage .sea { position: relative; display: grid; place-items: center; color: rgba(255,255,255,.88);
  background: radial-gradient(120% 80% at 80% 10%, rgba(255,255,255,.35), transparent 55%), radial-gradient(60% 50% at 20% 90%, rgba(10,70,82,.45), transparent 70%),
    repeating-radial-gradient(circle at 30% 120%, rgba(255,255,255,.07) 0 2px, transparent 2px 14px), linear-gradient(155deg, #8fdde4 0%, #33a9b8 42%, #0f6b78 100%); }
.look-brokerage .ic.boat { width: 64px; height: 64px; stroke-width: 1.1; filter: drop-shadow(0 6px 10px rgba(5,40,48,.25)); }
.look-brokerage .ic.boat.big { width: 120px; height: 120px; position: absolute; top: 120px; left: 50%; transform: translateX(-50%); }
.look-brokerage .pill { position: absolute; top: 18px; left: 18px; border: 1px solid rgba(255,255,255,.7); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: 11.5px; letter-spacing: .16em; font-weight: 600; background: rgba(255,255,255,.08); }
.look-brokerage .day-side { display: grid; gap: 18px; position: sticky; top: 16px; }
.look-brokerage .photo { min-height: 640px; border-radius: 26px; overflow: hidden; align-items: end; padding: 18px; }
.look-brokerage .glass { position: relative; z-index: 1; align-self: end; width: 100%; background: rgba(255,255,255,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 22px; padding: 22px; color: var(--ink); box-shadow: 0 20px 50px -24px rgba(5,40,48,.45); }
.look-brokerage .today h2 { font-size: 30px; }
.look-brokerage .daynav { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; padding: 2px; }
.look-brokerage .icon-btn { border: 0; background: none; padding: 6px; border-radius: 9px; cursor: pointer; color: var(--ink); display: grid; }
.look-brokerage .icon-btn:hover { background: var(--hover); }
.look-brokerage .timeline { list-style: none; margin: 10px 0 18px; padding: 0 0 0 12px; border-left: 2px solid var(--line-strong); display: grid; gap: 18px; }
.look-brokerage .timeline li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; position: relative; }
.look-brokerage .timeline li::before { content: ''; position: absolute; left: -18px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.look-brokerage .timeline .time { color: var(--muted); font-variant-numeric: tabular-nums; }
.look-brokerage .timeline b { display: block; font-size: 16px; }
.look-brokerage .btn.wide { width: 100%; justify-content: center; }
.look-brokerage .glass-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.look-brokerage .shape { padding: 22px; }
.look-brokerage .shape-head { display: grid; grid-template-columns: 56px 1fr; gap: 14px; }
.look-brokerage .shape-head .ic.big { color: var(--acc); background: var(--acc-soft); border-radius: 50%; padding: 8px; width: 56px; height: 56px; }
.look-brokerage .shape h2 { margin: 0 0 4px; font-size: 21px; }
.look-brokerage .shape p { margin: 0 0 6px; color: #2b4750; }
.look-brokerage .ask-link { border: 0; background: none; display: inline-flex; align-items: center; gap: 8px; color: var(--acc); font: inherit; font-weight: 500; padding: 12px 0 0; cursor: pointer; border-top: 1px solid var(--line); width: 100%; margin-top: 10px; }
.look-brokerage .ask input { width: 100%; margin-top: 10px; font: inherit; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; background: var(--hover); }

/* Clients, the yacht collection and the calendar. */
.look-brokerage .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.look-brokerage .client-card, .look-brokerage .yacht-card { text-decoration: none; color: var(--ink); display: grid; gap: 10px; }
.look-brokerage .client-card:hover, .look-brokerage .yacht-card:hover { border-color: var(--line-strong); }
.look-brokerage .client-head { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.look-brokerage .client-head b { display: block; font-size: 17px; }
.look-brokerage .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; font-weight: 600; }
.look-brokerage .notes { margin: 0; color: #2b4750; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.look-brokerage .yacht-card { padding: 0; overflow: hidden; }
.look-brokerage .yacht-img { height: 170px; }
.look-brokerage .yacht-text { display: grid; gap: 3px; padding: 4px 18px 18px; }
.look-brokerage .yacht-text b { font-size: 19px; letter-spacing: -.01em; }
.look-brokerage .price { margin-top: 6px; font-weight: 600; }
.look-brokerage .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.look-brokerage .weekday.today { outline: 2px solid var(--acc); }
/* A meeting on the week (TASK-223, Jordon: "seems a bit squished"): a white card with a teal edge, the time short, who in one
   line, the brief a slim link; a private slot quiet. */
.look-brokerage .event.busy { background: transparent; border-left-color: var(--line-strong); color: var(--muted); }
.look-brokerage .event.busy b { font-weight: 500; }
.look-brokerage .event .btn { margin-top: 6px; justify-self: start; font-size: 12.5px; padding: 6px 10px; gap: 4px; }
.look-brokerage .event-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.look-brokerage .event-brief { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--acc); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; text-decoration: none; }
.look-brokerage .event-brief:hover { text-decoration: underline; }
.look-brokerage .next-call { display: grid; gap: 8px; margin-bottom: 12px; }
.look-brokerage .brief-text { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.85); white-space: pre-wrap; }
.look-brokerage .ask-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.look-brokerage .ask-row input { margin-top: 0; }
.look-brokerage .ask-answer .q { margin: 10px 0 4px; }
.look-brokerage .ask-answer .a p { white-space: pre-wrap; margin: 6px 0 0; }
.look-brokerage .weekday h3 { margin: 0 0 10px; }
.look-brokerage .event { display: grid; gap: 3px; padding: 9px 10px 10px 11px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--acc); margin-bottom: 8px; min-width: 0; }
.look-brokerage .event .time { color: var(--acc); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.look-brokerage .event b { font-size: 13.5px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.look-brokerage .weekday { padding: 16px 12px; min-width: 0; }
.look-brokerage .weekday.today { background: var(--acc-soft); }
.look-brokerage .note-soon p { margin: 0; color: #2b4750; }

.look-brokerage .avatar-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.look-brokerage .avatar-img.big, .look-brokerage .avatar.big { width: 64px; height: 64px; font-size: 20px; }
.look-brokerage .me { display: flex; align-items: center; gap: 10px; }
.look-brokerage .me .avatar-img { width: 36px; height: 36px; }

.look-brokerage .upcoming h2 { margin: 0 0 8px; font-size: 18px; }
.look-brokerage .new-charter { display: grid; gap: 14px; max-width: 880px; }
.look-brokerage .new-charter h2 { margin: 6px 0 0; font-size: 19px; }
.look-brokerage .new-charter .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }

.look-brokerage .person { display: grid; grid-template-columns: 72px 1fr auto; gap: 18px; align-items: center; }
.look-brokerage .person h2 { margin: 0; font-size: 30px; letter-spacing: -.02em; }
.look-brokerage .person p { margin: 2px 0; }
.look-brokerage .avatar.big { width: 72px; height: 72px; font-size: 24px; }
.look-brokerage .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.look-brokerage .stack { display: grid; gap: 16px; }
.look-brokerage .notes-full { white-space: pre-wrap; margin: 0; color: #2b4750; }
.look-brokerage .charter-head h2 { font-size: 32px; letter-spacing: -.025em; margin: 6px 0 2px; }
.look-brokerage .charter-head h2 a { color: inherit; }
.look-brokerage .lede-sm { font-size: 17px; color: #2b4750; margin: 0 0 4px; }
.look-brokerage .parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 16px 0; }
.look-brokerage .part h3 { margin: 0 0 8px; }

@media (max-width: 1180px) {
  .look-brokerage .two { grid-template-columns: 1fr; }
  .look-brokerage .person { grid-template-columns: 56px 1fr; }
  .look-brokerage .day { grid-template-columns: 1fr; }
  .look-brokerage .day-side { position: static; }
  .look-brokerage .photo { min-height: 460px; }
  .look-brokerage .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .look-brokerage .app, .look-brokerage .app.rail-collapsed { grid-template-columns: 1fr; }
  .look-brokerage .rail { position: static; height: auto; }
  .look-brokerage .main { padding: 0 16px 32px; }
  .look-brokerage .move { grid-template-columns: 44px 1fr; }
  .look-brokerage .move-ic { width: 44px; height: 44px; }
  .look-brokerage .deal { grid-template-columns: 1fr; }
  .look-brokerage .deal-img { min-height: 120px; clip-path: none; }
  .look-brokerage .topsearch { width: auto; flex: 1; }
}

/* A client's history in one place (TASK-164). */
.look-brokerage .history h4 { margin: 4px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.look-brokerage .history .said { margin-bottom: 10px; }
.look-brokerage .history details { margin-top: 10px; }
.look-brokerage .add-chat { display: grid; gap: 10px; margin: 8px 0 14px; padding: 12px; border-radius: 12px; background: var(--hover); }
.look-brokerage .add-chat label { display: flex; gap: 8px; align-items: center; }
.look-brokerage .note-btn { display: inline-flex; align-items: center; gap: 6px; }
.look-brokerage .yacht-note .dictation { min-height: 220px; font-size: 17px; line-height: 1.5; }
@media (max-width: 720px) { .look-brokerage .note-btn .nav-label { display: none; } }
/* On a phone (TASK-166, found on the note page): the sidebar is a strip that scrolls on its own across the top, with
   only the places to go; the page never runs off the screen. */
@media (max-width: 720px) {
  .look-brokerage .rail { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: row; align-items: center; gap: 4px; overflow-x: auto; max-width: 100vw; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .look-brokerage .rail .brand-sub, .look-brokerage .rail .brand-name, .look-brokerage .rail-toggle, .look-brokerage .rail-foot .me { display: none; }
  .look-brokerage .rail .brand { flex: 0 0 auto; margin-right: 6px; }
  .look-brokerage .rail .nav, .look-brokerage .rail-foot { flex: 0 0 auto; }
  .look-brokerage .rail .nav { padding: 6px 10px; }
  .look-brokerage .rail-foot { display: flex; margin: 0; padding: 0; border: 0; }
  .look-brokerage .topbar { flex-wrap: wrap; gap: 8px; }
  .look-brokerage .topsearch { order: 3; flex: 1 1 100%; }
  .look-brokerage .main { min-width: 0; max-width: 100vw; }
}
.look-brokerage .trip h2 { margin: 2px 0; }
.look-brokerage .trip h4 { margin: 12px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.look-brokerage .trip-log { margin-top: 10px; }
.look-brokerage .yacht-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.look-brokerage .yacht-card { position: relative; }
.look-brokerage .yacht-card .add-photo { position: absolute; top: 10px; right: 10px; font-size: 12px; padding: 4px 10px; background: rgba(255, 255, 255, 0.9); }
.look-brokerage .weeks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin: 10px 0; }
.look-brokerage .wk { display: inline-block; height: 18px; min-width: 18px; border-radius: 4px; background: var(--hover); border: 1px solid var(--line); }
.look-brokerage .wk.booked { background: var(--acc); border-color: var(--acc); }
.look-brokerage .wk.option { background: var(--acc-soft); border-color: var(--acc); }
.look-brokerage .legend .wk { height: 12px; min-width: 12px; vertical-align: middle; }

/* Every page in My day's frame (TASK-177): one column when a page has no side; the aqua side card. */
.look-brokerage .day.solo { grid-template-columns: minmax(0, 1fr); }
.look-brokerage .sea-card { border-radius: 26px; overflow: hidden; padding: 18px; min-height: 340px; display: grid; grid-template-rows: 1fr auto; place-items: stretch; }
.look-brokerage .sea-card > .ic.boat { justify-self: center; align-self: center; margin: 34px 0 10px; }
.look-brokerage .sea-card .glass { align-self: end; }
.look-brokerage .sea-card .glass p { margin: 0 0 12px; color: #2b4750; }
.look-brokerage .sea-card .glass .form { max-width: none; }
/* Two or more beside a page: one aqua card, a small card inside for each (TASK-220). */
.look-brokerage .sea-group { grid-template-rows: auto 1fr; }
.look-brokerage .sea-group > .ic.boat { margin: 14px 0 16px; }
.look-brokerage .sea-stack { display: grid; gap: 12px; align-self: end; }
.look-brokerage .sea-group .glass { padding: 18px 20px; border-radius: 18px; }
.look-brokerage .sea-group .glass h2 { font-size: 19px; }
.look-brokerage .glass-kicker { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.look-brokerage .deal.small { grid-template-columns: minmax(0, 1fr); min-height: 0; }
/* The yacht photos (TASK-222): a photo fills the aqua card, the sea's colour under it until it loads; the drawn boat goes,
   and the photo shows above the card's white glass. The pill keeps a light tint so it reads on a white deck. */
.look-brokerage .sea.has-photo { background-color: #33a9b8; background-size: cover; background-repeat: no-repeat; }
.look-brokerage .sea.has-photo > .ic.boat { display: none; }
.look-brokerage .has-photo > .pill { background: rgba(6,48,56,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.look-brokerage .sea-card.has-photo { grid-template-rows: auto; min-height: 0; padding-top: 210px; }

/* On a phone (TASK-177): every page in one column that never runs off the screen; a row's status and its button fold
   under its words; headings wrap. */
@media (max-width: 720px) {
  .look-brokerage .app, .look-brokerage .app.rail-collapsed { grid-template-columns: minmax(0, 1fr); }
  .look-brokerage .day, .look-brokerage .day.solo { grid-template-columns: minmax(0, 1fr); }
  .look-brokerage .day > *, .look-brokerage .day-main > *, .look-brokerage .view > *, .look-brokerage .panel { min-width: 0; }
  .look-brokerage .hello { padding-top: 10px; }
  .look-brokerage .hello h1 { font-size: 24px; }
  .look-brokerage .lede { font-size: 15px; }
  .look-brokerage .hello.greet h1 { font-size: 34px; }
  .look-brokerage .hello.greet .lede { font-size: 17px; }
  .look-brokerage .card-head h2 { white-space: normal; font-size: 20px; }
  .look-brokerage .segs { margin-left: 0; }
  .look-brokerage .move { row-gap: 8px; }
  .look-brokerage .move > .chip, .look-brokerage .move > .btn, .look-brokerage .move > a { grid-column: 2; justify-self: start; }
  .look-brokerage .cards { grid-template-columns: minmax(0, 1fr); }
  .look-brokerage .sea-card { min-height: 240px; }
  .look-brokerage .sea-card.has-photo { padding-top: 150px; }
  .look-brokerage .photo { min-height: 380px; }
  .look-brokerage .summary { flex-wrap: wrap; }
  .look-brokerage .view { overflow-wrap: anywhere; }
}

/* Start here (TASK-179): the setup banner on My day, and the spreadsheet cards in the side. */
.look-brokerage .setup-banner { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; text-decoration: none; color: var(--ink); padding: 16px 20px; box-shadow: inset 4px 0 0 var(--acc), var(--shadow); }
.look-brokerage .setup-banner:hover { border-color: var(--line-strong); }
.look-brokerage details.import { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.look-brokerage details.import summary { cursor: pointer; font-weight: 600; color: var(--acc); list-style: none; display: flex; align-items: center; gap: 6px; }
.look-brokerage details.import summary::-webkit-details-marker { display: none; }
.look-brokerage details.import textarea { width: 100%; box-sizing: border-box; margin-top: 8px; font: 13px/1.5 var(--mono); border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px; background: #fff; }
@media (max-width: 720px) { .look-brokerage .setup-banner { grid-template-columns: 44px minmax(0, 1fr); } .look-brokerage .setup-banner .open { grid-column: 2; } }


/* Connections, Settings and a charter's own page (TASK-180). */
.look-brokerage .move.conn { align-items: start; }
.look-brokerage .move.conn > .chip, .look-brokerage .move.conn > .btn { margin-top: 14px; }
.look-brokerage .move .meta.next { color: var(--warn-text); }
.look-brokerage details.facts { margin-top: 6px; }
.look-brokerage details.facts summary, .look-brokerage details.fold > summary { cursor: pointer; color: var(--acc); font-weight: 600; list-style: none; }
.look-brokerage details.facts summary::-webkit-details-marker, .look-brokerage details.fold > summary::-webkit-details-marker { display: none; }
.look-brokerage details.facts summary::after, .look-brokerage details.fold > summary::after { content: ' ›'; }
.look-brokerage details[open].facts summary::after, .look-brokerage details[open].fold > summary::after { content: ' ‹'; }
.look-brokerage details.facts .detail { margin: 8px 0 0; font-size: 14px; }
.look-brokerage details.fold { margin-top: 6px; }
.look-brokerage details.fold > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 4px 0; }
.look-brokerage details.panel.fold > summary { color: var(--ink); }
.look-brokerage details.panel.fold > summary b { font-size: 19px; letter-spacing: -.01em; }
.look-brokerage details.panel.fold > summary .meta { font-weight: 400; }
.look-brokerage details.panel.fold[open] > summary { margin-bottom: 12px; }
.look-brokerage details.panel.fold > .panel, .look-brokerage details.panel.fold > .cols > .panel { box-shadow: none; border-radius: var(--r); background: var(--bg); }
.look-brokerage details.fold .setting { padding: 12px 0; border-top: 1px solid var(--line); }
.look-brokerage .setting .label { display: none; }
.look-brokerage .setting .meta { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
/* A charter's path: each step a dot on a line, done ones ticked, the one waiting on her ringed. */
.look-brokerage .path { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.look-brokerage .path-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 0; position: relative; }
.look-brokerage .path-step:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 36px; bottom: -8px; width: 2px; background: var(--line-strong); }
.look-brokerage .path-step .dot { width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--panel); display: grid; place-items: center; }
.look-brokerage .path-step.done .dot { background: var(--acc); border-color: var(--acc); }
.look-brokerage .path-step.done .dot .ic { stroke: #fff; stroke-width: 2.4; width: 14px; height: 14px; }
.look-brokerage .path-step.now .dot { border-color: var(--warn); box-shadow: 0 0 0 5px var(--warn-soft); }
.look-brokerage .path-step.busy .dot { border-color: var(--acc); box-shadow: 0 0 0 5px var(--acc-soft); }
.look-brokerage .path-step.stuck .dot { border-color: var(--risk-text, #b4432f); }
.look-brokerage .path-step > div { display: grid; gap: 2px; }
.look-brokerage .path-step b { font-size: 16px; letter-spacing: -.01em; }
.look-brokerage .path-step.now b { color: var(--warn-text); }
/* What the assistant found: each detail a row, its words under it, and the correction beside Accept. */
.look-brokerage .q { padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.look-brokerage .q > div:first-child { font-size: 16px; }
.look-brokerage .q .label { font-size: 11px; letter-spacing: .06em; color: var(--faint); margin-left: 6px; }
.look-brokerage .q .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.look-brokerage .q input[type=text] { font: inherit; border: 1px solid var(--line-strong); border-radius: 12px; padding: 9px 12px; background: #fff; color: var(--ink); min-width: 0; flex: 1 1 160px; max-width: 280px; }
.look-brokerage .q .btn.primary { padding: 9px 18px; }
.look-brokerage .next h3 { margin: 4px 0 2px; font-size: 18px; }
.look-brokerage .next .form { max-width: 560px; }
@media (max-width: 720px) {
  .look-brokerage .move.conn > .chip, .look-brokerage .move.conn > .btn { margin-top: 0; }
  .look-brokerage .q input[type=text] { max-width: none; }
}
.look-brokerage .seg button.on.automatic { background: var(--acc); color: #fff; }
.look-brokerage details.panel.fold > .panel, .look-brokerage details.panel.fold > .cols { margin: 0 0 12px; }
.look-brokerage.on-day .view section.panel > h2 { font-size: 22px; letter-spacing: -.015em; margin: 0 0 8px; }

/* Kodo for the broker (TASK-183): a boat's free windows as chips; a charter row's chips side by side. */
.look-brokerage .kodo-windows { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.look-brokerage .move .chips { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.look-brokerage a.move { text-decoration: none; color: inherit; }
.look-brokerage a.move:hover b { color: var(--acc); }
.look-brokerage .move .open { display: inline-flex; align-items: center; gap: 4px; color: var(--acc); font-weight: 600; }

/* A new inquiry (TASK-188): the email beside what the assistant found; on a phone, what was found first. */
.look-brokerage .inq { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.look-brokerage .inq-side { display: flex; flex-direction: column; gap: 22px; }
/* The last card on the right takes what is left, so both columns end level (TASK-190). */
.look-brokerage .inq-side > :last-child { flex: 1; }
.look-brokerage .inq-rows { display: grid; }
.look-brokerage .inq-row { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.look-brokerage .inq-row:first-child { border-top: 0; }
.look-brokerage .inq-label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.look-brokerage .inq-value { display: grid; gap: 4px; min-width: 0; }
.look-brokerage .inq-value b { font-size: 16px; font-weight: 600; }
.look-brokerage .inq-quote { color: var(--faint); font-size: 13px; font-style: italic; }
.look-brokerage .inq-edit { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.look-brokerage .inq-edit input, .look-brokerage .inq-edit select { font: inherit; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 10px; background: #fff; color: var(--ink); min-width: 0; }
.look-brokerage .linkish { border: 0; background: none; color: var(--acc); font-weight: 600; cursor: pointer; padding: 2px 0; font: inherit; }
.look-brokerage .mail { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.look-brokerage .mail:first-of-type { border-top: 0; }
.look-brokerage .mail-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.look-brokerage .mail-at { margin-left: auto; }
.look-brokerage .mail-subject { font-weight: 600; }
.look-brokerage .mail-text { white-space: pre-wrap; line-height: 1.6; color: #22363d; overflow-wrap: anywhere; max-height: 560px; overflow-y: auto; }
@media (max-width: 1000px) {
  .look-brokerage .inq { grid-template-columns: minmax(0, 1fr); }
  .look-brokerage .inq-side > :last-child { flex: none; }
}
.look-brokerage .found-actions { align-items: center; margin-top: 6px; }

/* TASK-189: the email and what was found in one card; a line between them. */
.look-brokerage .inq-card { display: grid; gap: 4px; }
.look-brokerage .inq-found { border-top: 1px solid var(--line-strong); margin-top: 10px; padding-top: 18px; }
/* What was found first, the email under it (TASK-411, Jordon's order). */
.look-brokerage .inq-card > .inq-found:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.look-brokerage .inq-card > .inq-found + .inq-letter { border-top: 1px solid var(--line-strong); margin-top: 10px; padding-top: 18px; }
.look-brokerage .inq-letter .mail-text { max-height: 340px; }
.look-brokerage .chip.suggest { margin-left: 8px; vertical-align: 2px; font-weight: 500; }
.look-brokerage a.linkish { text-decoration: none; }

/* Where things stand with a client (TASK-191): the same five parts in the same places, the next step first. */
.look-brokerage .ov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.look-brokerage .ov-part { background: var(--bg); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.look-brokerage .ov-part p { margin: 0; white-space: pre-wrap; line-height: 1.55; }
.look-brokerage .ov-next { grid-column: 1 / -1; background: var(--acc-soft); box-shadow: inset 4px 0 0 var(--acc); }
.look-brokerage .ov-next p { font-size: 16px; font-weight: 500; }
.look-brokerage .ov-part:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (max-width: 720px) { .look-brokerage .ov { grid-template-columns: minmax(0, 1fr); } }

/* Look for yachts (TASK-192): the databases as wide links, and the search in one line to copy. */
.look-brokerage .find-sites { display: grid; gap: 10px; margin: 6px 0 10px; }
.look-brokerage .find-site { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--ink); text-decoration: none; }
.look-brokerage .find-site:hover { background: var(--hover); border-color: var(--acc); }
.look-brokerage .find-site b { font-size: 16px; }
.look-brokerage .find-site .meta { grid-column: 1; }
.look-brokerage .find-site svg { grid-column: 2; grid-row: 1 / span 2; color: var(--acc); }
.look-brokerage .find-what { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; align-items: baseline; margin: 8px 0 14px; padding: 14px 16px; border-radius: var(--r); background: var(--bg); }
.look-brokerage .find-what dt { margin: 0; }
.look-brokerage .find-what dd { margin: 0; font-weight: 500; line-height: 1.45; }
.look-brokerage .find-row .move-text .find-what { margin: 6px 0 0; }

/* A yacht's brochure, dropped in (TASK-193). */
.look-brokerage .drop-wrap { display: grid; gap: 10px; margin-bottom: 18px; }
.look-brokerage .drop { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--panel); cursor: pointer; }
.look-brokerage .drop:hover, .look-brokerage .drop:focus-visible, .look-brokerage .drop.over { border-color: var(--acc); background: var(--acc-soft); outline: none; }
.look-brokerage .drop-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc); }
.look-brokerage .drop-text { display: grid; gap: 4px; }
.look-brokerage .drop-text b { font-size: 17px; }
.look-brokerage .drop-status { display: grid; gap: 6px; }
.look-brokerage .drop-line { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); }
.look-brokerage .drop-err { color: var(--risk-text); }
.look-brokerage .on-board { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) { .look-brokerage .drop { grid-template-columns: 1fr; text-align: left; } .look-brokerage .drop-line { grid-template-columns: auto minmax(0, 1fr); } }

/* A proposal, as the broker builds it (TASK-194). */
.look-brokerage .prop-yacht { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; padding: 18px; margin-bottom: 16px; }
.look-brokerage .prop-yacht .yacht-img { border-radius: var(--r); min-height: 180px; overflow: hidden; }
.look-brokerage .prop-yacht .yacht-img img { width: 100%; height: 100%; object-fit: cover; }
.look-brokerage .prop-text { display: grid; gap: 8px; align-content: start; min-width: 0; }
.look-brokerage .prop-text .card-head h2 { margin: 0; }
.look-brokerage .watch { border-radius: var(--r); background: var(--warn-soft); color: var(--warn-text); padding: 10px 14px; }
.look-brokerage .watch b { display: inline-flex; align-items: center; gap: 6px; }
.look-brokerage .watch ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.look-brokerage .fits { display: flex; flex-wrap: wrap; gap: 6px; }
.look-brokerage .pitch { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r); background: var(--bg); }
.look-brokerage .pitch textarea { width: 100%; font: inherit; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); resize: vertical; }
.look-brokerage .pitch p { margin: 0; line-height: 1.55; white-space: pre-wrap; }
.look-brokerage .from-mine { display: flex; gap: 10px; align-items: center; margin: -6px 0 18px; }
.look-brokerage .from-mine select { flex: 1; font: inherit; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
@media (max-width: 720px) { .look-brokerage .prop-yacht { grid-template-columns: 1fr; } }

/* The client's link, shown once (ADR-0150). */
.look-brokerage .link-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--bg); }
.look-brokerage .link-box .link-text { overflow-wrap: anywhere; font-size: 13px; }
.look-brokerage .link-box .meta { grid-column: 1 / -1; margin: 0; }

/* What the client said, and what it taught (TASK-196). */
.look-brokerage .their-word { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r); background: var(--bg); border-left: 4px solid var(--line-strong); }
.look-brokerage .their-word.like { border-left-color: var(--acc); }
.look-brokerage .their-word.dislike { border-left-color: var(--warn); }
.look-brokerage .lesson { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.look-brokerage .lesson .actions { display: flex; gap: 6px; }
.look-brokerage .intro-box { width: 100%; font: inherit; line-height: 1.5; padding: 10px 12px; margin: 4px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); resize: vertical; }
.look-brokerage .day-side .card-head h2 { overflow-wrap: anywhere; text-wrap: balance; min-width: 0; }

/* A yacht's photo, chosen from its brochure (TASK-197). */
.look-brokerage .photo-strip { display: grid; gap: 10px; margin-top: 8px; }
.look-brokerage .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.look-brokerage .thumb { padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; background: var(--track); aspect-ratio: 4 / 3; cursor: pointer; }
.look-brokerage .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.look-brokerage .thumb.on { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.look-brokerage .twin { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r); background: var(--acc-soft); }
.look-brokerage .web-photos { display: grid; gap: 6px; margin-top: 6px; }
.look-brokerage .web-photos input { flex: 1; font: inherit; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }

/* Holding, booking and inviting in Kodo (TASK-202). */
.look-brokerage .kodo-window { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.look-brokerage .kodo-hold, .look-brokerage .kodo-book, .look-brokerage .kodo-again { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.look-brokerage .kodo-book { margin-top: 8px; }
.look-brokerage .kodo-book .meta { flex-basis: 100%; margin: 0; }
.look-brokerage .kodo-hold input[type=number], .look-brokerage .kodo-book input[type=number] { width: 7.5em; }
.look-brokerage .kodo-again-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.look-brokerage .kodo-book select, .look-brokerage .kodo-invite input[type=email], .look-brokerage .kodo-again input, .look-brokerage .kodo-hold input, .look-brokerage .kodo-book input, .look-brokerage .kodo-invite input[type=text] { font: inherit; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.look-brokerage .kodo-invite { display: grid; gap: 8px; margin-top: 12px; }

/* One yacht's page (TASK-205): her notes, newest first, each with the assistant's marks. */
.look-brokerage .notes-list { display: grid; gap: 14px; margin-top: 14px; }
.look-brokerage .note-row { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.look-brokerage .note-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.look-brokerage .note-words { margin: 0; white-space: pre-wrap; line-height: 1.55; }
.look-brokerage .note-row textarea, .look-brokerage .note-add textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px; border-radius: 12px; border: 1px solid var(--line-strong); }
.look-brokerage .note-add .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.look-brokerage .note-snip { font-style: italic; }
.look-brokerage .add-yacht-name { display: flex; gap: 6px; margin-top: 6px; }
.look-brokerage .add-yacht-name input { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); }

/* Yacht collection as cards or a spreadsheet (TASK-207): a bar to switch and find; the spreadsheet full screen. */
.look-brokerage .yacht-list { display: grid; gap: 14px; }
.look-brokerage .yacht-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.look-brokerage .yacht-bar .segs { margin-left: 0; }
.look-brokerage .yacht-bar input[type=search] { flex: 1; min-width: 200px; font: inherit; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.look-brokerage .yacht-table-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 14px; }
.look-brokerage .yacht-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.look-brokerage .yacht-table th { position: sticky; top: 0; background: var(--panel); z-index: 1; text-align: left; border-bottom: 1px solid var(--line-strong); padding: 0; white-space: nowrap; }
.look-brokerage .yacht-table th .sort { all: unset; cursor: pointer; display: block; padding: 10px 12px; font-weight: 600; color: var(--muted); }
.look-brokerage .yacht-table th.on .sort { color: var(--ink); }
.look-brokerage .yacht-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.look-brokerage .yacht-table tr { cursor: pointer; }
.look-brokerage .yacht-table tbody tr:hover td { background: var(--hover); }
.look-brokerage .yacht-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.look-brokerage .yacht-table .c-name a { font-weight: 600; color: var(--ink); text-decoration: none; }
.look-brokerage .yacht-table .c-my_notes { min-width: 260px; color: var(--muted); }
.look-brokerage .yacht-list.full { position: fixed; inset: 0; z-index: 1000; margin: 0; border-radius: 0; background: var(--bg, #fff); padding: 20px 24px; overflow: hidden; grid-template-rows: auto 1fr; }
.look-brokerage .yacht-list.full .yacht-table-wrap { max-height: none; }
.look-brokerage .yacht-list.full .yacht-table { font-size: 14.5px; }
body.yachts-full { overflow: hidden; }
/* A yacht's one-pager (TASK-207): its photo wide, its facts in a grid. */
.look-brokerage .hero-wrap { position: relative; }
.look-brokerage .yacht-hero { height: 320px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; }
.look-brokerage .yacht-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.look-brokerage .hero-wrap .hero-photo { position: absolute; right: 14px; bottom: 14px; background: rgba(255,255,255,.92); }
.look-brokerage .facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; margin-top: 6px; }
.look-brokerage .fact { display: grid; gap: 2px; }
.look-brokerage .fact .k { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.look-brokerage .fact b { font-size: 15.5px; }

/* Charters as a CRM (TASK-209): a board of stages, a card a charter; or a list. */
.look-brokerage .crm-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.look-brokerage .crm-col { background: var(--hover); border-radius: 14px; padding: 10px; display: grid; gap: 10px; align-content: start; min-height: 240px; }
.look-brokerage .crm-col > header { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: start; padding: 2px 4px; }
.look-brokerage .crm-col > header b { display: block; font-size: 14px; }
.look-brokerage .crm-col > header .meta { font-size: 12px; }
.look-brokerage .crm-count { font-weight: 700; font-size: 13px; background: var(--panel); border-radius: 999px; padding: 2px 9px; }
.look-brokerage .crm-sum { grid-column: 1 / -1; font-variant-numeric: tabular-nums; }
.look-brokerage .crm-cards { display: grid; gap: 8px; }
.look-brokerage .deal-card { display: grid; gap: 4px; padding: 11px 12px; background: var(--panel); border-radius: 12px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(10,40,48,.05); }
.look-brokerage .deal-card:hover { border-color: var(--line-strong); }
.look-brokerage .deal-card.mine { border-left: 3px solid var(--acc); }
.look-brokerage .deal-card .meta { font-size: 12.5px; }
.look-brokerage .deal-card .small { font-size: 11.5px; }
.look-brokerage .deal-next { font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.look-brokerage .crm-empty { padding: 6px 4px; }
.look-brokerage .yacht-list.full .crm-board { height: calc(100vh - 110px); }

.look-brokerage .crm-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.look-brokerage .crm-stat { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.look-brokerage .crm-stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.look-brokerage .crm-stat span { color: var(--muted); font-size: 13px; }
.look-brokerage .crm-stat.mine { border-color: var(--acc); }
.look-brokerage .crm-stat.quiet { background: none; }

/* Your fleet as a planner (TASK-210): weeks across, a row a yacht, bookings and options as labelled blocks. */
.look-brokerage .planner .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.look-brokerage .plan-scroll { overflow-x: auto; display: grid; gap: 8px; margin-top: 10px; }
.look-brokerage .plan-line { display: grid; grid-template-columns: 190px repeat(12, minmax(64px, 1fr)); gap: 4px; align-items: stretch; min-width: 980px; }
.look-brokerage .plan-head span { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
.look-brokerage .plan-yacht { display: grid; gap: 1px; text-decoration: none; color: var(--ink); padding: 6px 4px; }
.look-brokerage .plan-yacht .meta { font-size: 12px; }
.look-brokerage .plan-cell { background: var(--hover); border-radius: 8px; min-height: 64px; }
.look-brokerage .plan-block { z-index: 1; border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; align-content: center; text-decoration: none; overflow: hidden; min-height: 64px; }
.look-brokerage .plan-block b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-brokerage .plan-block span { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-brokerage .plan-block.booked { background: var(--acc); color: #fff; }
.look-brokerage .plan-block.option { background: var(--acc-soft); color: var(--ink); border: 2px dashed var(--acc); }
.look-brokerage .plan-key { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; background: var(--hover); }
.look-brokerage .plan-key.booked { background: var(--acc); }
.look-brokerage .plan-key.option { background: var(--acc-soft); border: 2px dashed var(--acc); }

/* The shortlist as cards (TASK-211): a few yachts, each with the links to send. */
.look-brokerage .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.look-brokerage .pick-card { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; }
.look-brokerage .pick-card .yacht-img { height: 150px; border-radius: 0; }
.look-brokerage .pick-text { display: grid; gap: 6px; padding: 14px 16px 16px; align-content: start; }
.look-brokerage .pick-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.look-brokerage .pick-head a { color: var(--ink); text-decoration: none; font-size: 16px; }
.look-brokerage .pick-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.look-brokerage .btn.small { padding: 6px 10px; font-size: 12.5px; }
.look-brokerage .pick-tick { display: flex; gap: 6px; align-items: center; font-weight: 600; margin-top: 6px; }
.look-brokerage details.panel.fold > summary { cursor: pointer; font-weight: 600; }

/* Requests (TASK-212). */
.look-brokerage .req-list { display: grid; gap: 10px; }
.look-brokerage .req-card { display: grid; gap: 6px; padding: 12px 14px; }
.look-brokerage .req-card.late { border-left: 3px solid var(--risk, #c0573e); }
.look-brokerage .req-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.look-brokerage .req-done { display: flex; flex-wrap: wrap; gap: 6px; }
.look-brokerage .req-done input { flex: 1; min-width: 200px; font: inherit; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); }

/* My day: a move opens in place (TASK-214). */
.look-brokerage .move.click { cursor: pointer; border-radius: 12px; }
.look-brokerage .move.click:hover b, .look-brokerage .move.click[aria-expanded="true"] b { color: var(--acc); }
.look-brokerage .move.click:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.look-brokerage .move-more { margin: -4px 0 12px 72px; padding: 16px 18px; border-radius: 14px; background: var(--acc-soft); display: grid; gap: 14px; }
.look-brokerage .move-explain { display: grid; gap: 8px; }
.look-brokerage .move-explain p { margin: 0; line-height: 1.5; max-width: 68ch; }
.look-brokerage .move-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.look-brokerage .move-facts .fact { display: inline-grid; gap: 1px; padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.look-brokerage .move-facts .fact .k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.look-brokerage .move-facts .fact.late b { color: var(--risk-text, var(--warn-text)); }
.look-brokerage .move-go { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) { .look-brokerage .move-more { margin-left: 0; } }

/* Look for yachts: the inquiries first, the databases in a column beside them (TASK-214). */
.look-brokerage .find-layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.look-brokerage .find-aside { position: sticky; top: 16px; display: grid; gap: 16px; }
.look-brokerage .find-aside .find-site { padding: 12px 14px; }
.look-brokerage .find-main { display: grid; gap: 16px; min-width: 0; }
.look-brokerage .find-who { text-decoration: none; color: inherit; }
.look-brokerage .find-who:hover b { color: var(--acc); }
.look-brokerage .find-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.look-brokerage .find-go .meta { flex-basis: 100%; }
.look-brokerage .find-what dd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.look-brokerage .find-what dd .copy { flex: none; opacity: .55; }
.look-brokerage .find-what dd:hover .copy, .look-brokerage .find-what dd .copy:focus-visible { opacity: 1; }
.look-brokerage .teaches { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.look-brokerage .teach summary { cursor: pointer; color: var(--acc); font-weight: 600; font-size: 14px; }
.look-brokerage .teach[open] { display: grid; gap: 8px; }
.look-brokerage .teach input { width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line-strong); font: inherit; font-size: 13px; background: var(--panel); color: var(--ink); }
.look-brokerage .teach .btn { justify-self: start; }
@media (max-width: 980px) {
  .look-brokerage .find-layout { grid-template-columns: 1fr; }
  .look-brokerage .find-aside { position: static; order: 2; }
}

/* The contract, to read and approve (TASK-214): the document large, the checks and choices beside it. */
.look-brokerage .contract-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 24px; align-items: start; }
.look-brokerage .contract-doc { display: grid; gap: 10px; min-width: 0; }
.look-brokerage .paper-note { display: flex; align-items: center; gap: 6px; margin: 0; }
.look-brokerage .paper { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); padding: clamp(28px, 5vw, 64px) clamp(22px, 5vw, 72px); font-size: 16px; line-height: 1.75; color: var(--ink); max-width: 820px; }
.look-brokerage .paper-line { white-space: pre-wrap; margin: 0 0 14px; max-width: 70ch; }
.look-brokerage .paper-line.blank { margin: 0; min-height: 1em; }
.look-brokerage .paper-title { text-align: center; font-size: 20px; letter-spacing: .22em; font-weight: 700; margin: 0 0 6px; }
.look-brokerage .paper-sub { text-align: center; color: var(--muted); font-size: 13px; margin: 0 auto 14px !important; }
.look-brokerage .paper-title, .look-brokerage .paper-sub { max-width: none; }
.look-brokerage .clause { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); }
.look-brokerage .clause-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.look-brokerage .paper mark { background: var(--acc-soft); color: var(--acc-text); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.look-brokerage .contract-side { display: grid; gap: 16px; position: sticky; top: 16px; }
.look-brokerage .contract-side .card-moves { padding: 20px; }
.look-brokerage .btn.wide { width: 100%; justify-content: center; }
.look-brokerage .contract-side .btn.wide + .btn.wide { margin-top: 8px; }
.look-brokerage .change-box { display: grid; gap: 8px; margin-top: 8px; }
.look-brokerage .change-box textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); font: inherit; background: var(--panel); color: var(--ink); resize: vertical; }
.look-brokerage .link-btn { background: none; border: 0; padding: 8px 0 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; justify-self: start; }
.look-brokerage .checks { display: grid; }
.look-brokerage .check { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.look-brokerage .check:first-child { border-top: 0; }
.look-brokerage .check .k { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.look-brokerage .check .v { display: grid; gap: 1px; }
.look-brokerage .check-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.look-brokerage .check.ok .check-dot { background: var(--acc-soft); color: var(--acc); }
.look-brokerage .check.warn .check-dot { background: var(--warn-soft); color: var(--warn-text); }
.look-brokerage .check.risk .check-dot { background: var(--risk-soft); color: var(--risk-text); }
.look-brokerage .check.warn .meta, .look-brokerage .check.risk .meta { color: var(--warn-text); }
.look-brokerage .check.plain .check-dot { background: var(--track); }
.look-brokerage .timeline li.late b { color: var(--warn-text); }
@media (max-width: 1100px) {
  .look-brokerage .contract-layout { grid-template-columns: 1fr; }
  .look-brokerage .contract-side { position: static; order: -1; }
}

/* One email conversation (TASK-214): a thread of messages, each with its sender and time, readable paragraphs. */
.look-brokerage .mail-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.look-brokerage .mail-status .back { color: var(--acc); font-weight: 600; text-decoration: none; margin-right: 6px; }
.look-brokerage .mail-status .btn { margin-left: auto; }
.look-brokerage .mail-thread { display: grid; gap: 12px; }
.look-brokerage .mail-msg { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.look-brokerage .mail-msg.mine { border-left: 3px solid var(--acc); }
.look-brokerage .mail-head { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 16px 22px; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.look-brokerage .mail-head:hover { background: var(--hover); }
.look-brokerage .mail-who { display: grid; gap: 1px; min-width: 0; }
.look-brokerage .mail-who b { font-size: 16px; }
.look-brokerage .mail-who .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-brokerage .mail-when { color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.look-brokerage .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--track); color: var(--ink); font-weight: 700; font-size: 14px; flex: none; }
.look-brokerage .avatar.me { background: var(--acc); color: #fff; }
.look-brokerage .mail-gist { margin: -6px 22px 16px 80px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-brokerage .mail-body { padding: 0 22px 20px 80px; font-size: 15.5px; line-height: 1.65; }
.look-brokerage .mail-body p { margin: 0 0 12px; max-width: 70ch; white-space: pre-line; }
.look-brokerage .mail-body .quoted { margin-top: 6px; }
.look-brokerage .mail-body .quoted summary { color: var(--muted); cursor: pointer; font-size: 13px; }
.look-brokerage .mail-body .quoted pre { white-space: pre-wrap; font: inherit; font-size: 14px; color: var(--muted); border-left: 2px solid var(--line-strong); padding-left: 12px; margin: 8px 0 0; }
.look-brokerage .mail-files { display: flex; flex-wrap: wrap; gap: 8px; }
.look-brokerage .file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-size: 13px; }
.look-brokerage .filed { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 12px 14px; border-radius: 12px; background: var(--acc-soft); color: var(--ink); text-decoration: none; }
.look-brokerage .filed .kicker { grid-column: 1; }
.look-brokerage .filed b { grid-column: 1; }
.look-brokerage .filed svg { grid-column: 2; grid-row: 1 / span 3; color: var(--acc); }
.look-brokerage .filed .meta { grid-column: 1; }
.look-brokerage .sum-text { white-space: pre-line; line-height: 1.6; margin: 0 0 8px; }
.look-brokerage .mail-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.look-brokerage .mail-people li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.look-brokerage .mail-people li > span:last-child { display: grid; min-width: 0; }
.look-brokerage .mail-people .meta { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .look-brokerage .mail-head { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 16px; }
  .look-brokerage .mail-head .mail-when, .look-brokerage .mail-head .chip { grid-column: 2; }
  .look-brokerage .mail-body { padding: 0 16px 16px; }
  .look-brokerage .mail-gist { margin: -4px 16px 14px; }
}

/* A charter's page (TASK-214): the next step first, then the journey, the brief and what has happened. */
.look-brokerage .next-step { display: grid; gap: 10px; padding: 26px 28px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--acc) 0%, #0b4a54 100%); color: #fff; box-shadow: var(--shadow); }
.look-brokerage .next-step .kicker { color: rgba(255,255,255,.75); }
.look-brokerage .next-step h2 { margin: 0; font-size: 28px; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.look-brokerage .next-step p { margin: 0; max-width: 64ch; line-height: 1.55; color: rgba(255,255,255,.88); }
.look-brokerage .next-step .next-do { color: #fff; font-weight: 500; }
.look-brokerage .next-step .meta { color: rgba(255,255,255,.7); }
.look-brokerage .next-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.look-brokerage .next-step .btn.primary { background: #fff; color: var(--acc); border-color: #fff; }
.look-brokerage .next-step .btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.look-brokerage .next-also { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.2); }
.look-brokerage .next-also a { color: #fff; }
.look-brokerage .next-step.calm { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.look-brokerage .next-step.calm .kicker, .look-brokerage .next-step.calm .meta { color: var(--muted); }
.look-brokerage .next-step.calm p { color: var(--ink); }
.look-brokerage .next-step.calm .btn { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }
.look-brokerage .next-step.calm .btn.primary { background: var(--acc); color: #fff; border-color: var(--acc); }
.look-brokerage .journey-card { padding: 14px 20px 18px; }
.look-brokerage .brief-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.look-brokerage .brief-tile { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.look-brokerage .brief-tile .k, .look-brokerage .wishes .k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.look-brokerage .brief-tile b { font-size: 15px; line-height: 1.35; }
.look-brokerage .wishes { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--acc-soft); }
.look-brokerage .wishes p { margin: 4px 0 0; line-height: 1.5; }
.look-brokerage .story { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.look-brokerage .story > li { display: grid; gap: 6px; padding-left: 14px; border-left: 2px solid var(--line-strong); }
.look-brokerage .story > li.open { border-left-color: var(--acc); }
.look-brokerage .story-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.look-brokerage .story-head a { color: inherit; text-decoration: none; }
.look-brokerage .story-head a:hover b { color: var(--acc); }
.look-brokerage .story-head .meta { margin-left: auto; }
.look-brokerage .move-ic.small { width: 28px; height: 28px; }
.look-brokerage .story-steps { list-style: none; margin: 0; padding: 0 0 0 36px; display: grid; gap: 4px; font-size: 14px; }
.look-brokerage .story-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: baseline; }
.look-brokerage .story-steps li.done .tick { color: var(--acc); }
.look-brokerage .story-steps li.now { font-weight: 600; }
.look-brokerage .story-steps li.now .tick { color: var(--warn); font-size: 18px; line-height: 1; }
.look-brokerage .side-list { list-style: none; margin: 0; padding: 0; display: grid; }
.look-brokerage .side-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.look-brokerage .side-list li:first-child { border-top: 0; }
.look-brokerage .side-list a { display: grid; gap: 1px; color: inherit; text-decoration: none; min-width: 0; }
.look-brokerage .side-list a:hover b { color: var(--acc); }
.look-brokerage .side-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

/* Any record, in plain words (TASK-216). */
.look-brokerage .rec-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px; margin: 0; }
.look-brokerage .rec-facts dt { color: var(--muted); font-size: 13px; letter-spacing: .02em; }
.look-brokerage .rec-facts dd { margin: 0; font-weight: 500; }
.look-brokerage .apa-bar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; margin: 14px 0 6px; }
.look-brokerage .apa-bar span { display: block; height: 100%; background: var(--acc); border-radius: 999px; }
.look-brokerage .apa-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.look-brokerage .apa-table th { text-align: left; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.look-brokerage .apa-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.look-brokerage .apa-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.look-brokerage .apa-table a { color: inherit; }
.look-brokerage .apa-table a.chip { text-decoration: none; }

/* KODO's office and desk in CharterDesk's colours (TASK-216; Jordon, 8 October: "I dont want them blue inside ... not
 * inside a box, just make it the same as kodo, but in the right colors"): KODO's layout and pictures, laid on the page
 * itself; white panels, teal for what acts, the look's own type. ManagementDesk keeps KODO's dark version. */
.look-brokerage .ko-wrap, .look-brokerage .ko-overlay { --sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --ink: #0a1e25; --muted: #557079; --line: rgba(10,40,48,.08); --gold: #0e5f6b; --risk: #e5484d; --shadow: 0 1px 2px rgba(10,40,48,.04), 0 18px 40px -22px rgba(10,40,48,.18); }
.look-brokerage .ko-wrap { --ko-line: var(--line); --ko-panel: var(--panel); --ko-text: var(--ink); --ko-mute: var(--muted); --ko-gold: var(--acc); --gold: var(--acc); background: transparent; color: var(--ink); border-radius: 0; }
.look-brokerage .ko-wrap.dash { height: calc(100dvh - 118px); min-height: 620px; gap: 16px; }
.look-brokerage .ko-wrap.stack { padding: 0; }
.look-brokerage .ko-stage { padding: 0; }
.look-brokerage .ko-side { padding: 0; gap: 16px; }
.look-brokerage .ko-frame { background: none; padding: 0; box-shadow: none; border-radius: var(--r-lg); }
.look-brokerage .ko-plan { border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--track); }
.look-brokerage .ko-hit:hover { box-shadow: 0 0 0 .16cqw rgba(255,255,255,.95), 0 0 0 .32cqw var(--acc); }
.look-brokerage .ko-hit:focus-visible { box-shadow: 0 0 0 .22cqw var(--acc); }
.look-brokerage .ko-hit.sel, .look-brokerage .ko-hit.working.sel { box-shadow: 0 0 0 .2cqw #fff, 0 0 0 .38cqw var(--acc), 0 0 1.6cqw rgba(14,95,107,.45); }
.look-brokerage .ko-sign { background: rgba(255,255,255,.95); border: 1px solid var(--line-strong); color: var(--ink); box-shadow: 0 .15cqw .5cqw rgba(10,40,48,.18); }
.look-brokerage .ko-sign .r { color: var(--muted); }
.look-brokerage .ko-sign.dim { background: rgba(255,255,255,.9); border-color: var(--line-strong); }
.look-brokerage .ko-sign.dim .n { color: var(--ink); }
.look-brokerage .ko-hit.sel .ko-sign { border-color: var(--acc); box-shadow: 0 0 0 .12cqw var(--acc), 0 .2cqw .6cqw rgba(10,40,48,.2); }
.look-brokerage .ko-token { border-color: #fff; box-shadow: 0 0 0 .14cqw var(--acc), 0 .2cqw .5cqw rgba(0,0,0,.35); }
.look-brokerage .ko-room.free { background: rgba(255,255,255,.94); border-color: var(--line-strong); color: var(--acc-text); text-shadow: none; }
.look-brokerage .ko-carpet-mark i { background: #fff; }
.look-brokerage .ko-ticker { background: var(--line); border-color: var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.look-brokerage .ko-tick { background: var(--panel); font-family: var(--sans); padding: 10px 14px; }
.look-brokerage .ko-tick .k { color: var(--muted); font-family: var(--mono); }
.look-brokerage .ko-tick .v { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.look-brokerage .ko-tick .v small { color: var(--muted); }
.look-brokerage .ko-tick .v.warn { color: var(--warn-text); }
.look-brokerage .ko-tick .v.bad { color: var(--risk-text); }
.look-brokerage .ko-tick.go:hover:not(:disabled) { background: var(--hover); }
.look-brokerage .ko-tick.go:focus-visible { outline-color: var(--acc); }
.look-brokerage .ko-info { padding: 0; border-top: 0; gap: 16px; }
.look-brokerage .ko-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); color: var(--ink); padding: 14px 16px; font-size: 14px; }
.look-brokerage .ko-panel h3 { color: var(--acc-text); border-bottom-color: var(--line); font-family: var(--mono); }
.look-brokerage .ko-headlink { color: var(--acc); font-family: var(--mono); }
.look-brokerage .ko-headlink:hover { color: var(--ink); }
.look-brokerage .ko-chev { color: var(--muted); }
.look-brokerage .ko-chev:hover { background: var(--hover); color: var(--ink); }
.look-brokerage .ko-portrait { background: var(--acc-soft); border-color: var(--line); }
.look-brokerage .ko-who-text b, .look-brokerage .ko-title, .look-brokerage .ko-stat b, .look-brokerage .ko-linkish { color: var(--ink); }
.look-brokerage .ko-who-text span, .look-brokerage .ko-stat span, .look-brokerage .ko-meta, .look-brokerage .ko-how, .look-brokerage .ko-kicker { color: var(--muted); }
.look-brokerage .ko-who-text .ko-state, .look-brokerage .ko-next, .look-brokerage .ko-steps li, .look-brokerage .ko-flows { color: var(--ink); }
.look-brokerage .ko-kicker.live { color: #1f9d6a; }
.look-brokerage .ko-next span { color: var(--acc); }
.look-brokerage .ko-stat { border-top-color: var(--line); }
.look-brokerage .ko-stat b { font-family: var(--mono); }
.look-brokerage .ko-steps li svg { color: var(--acc); }
.look-brokerage .ko-linkish { text-decoration-color: var(--acc-line); }
.look-brokerage .ko-map { background: var(--bg); }
.look-brokerage .ko-log li { color: var(--ink); border-top-color: var(--line); font-size: 13px; }
.look-brokerage .ko-log li.mine { color: var(--ink); background: var(--acc-soft); }
.look-brokerage .ko-log time { color: var(--muted); }
.look-brokerage .ko-btn { border-color: var(--line-strong); background: var(--panel); color: var(--ink); border-radius: 10px; font-family: var(--sans); }
.look-brokerage .ko-btn:hover { border-color: var(--acc); }
.look-brokerage .ko-btn.gold, .look-brokerage .ko-btn.light.primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.look-brokerage .ko-give input, .look-brokerage .ko-memo input:not([type]) { background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink); border-radius: 10px; font-family: var(--sans); }
.look-brokerage .ko-give input::placeholder, .look-brokerage .ko-memo input::placeholder { color: var(--faint); }
.look-brokerage .ko-give input:focus, .look-brokerage .ko-memo input:not([type]):focus { outline-color: var(--acc); }
.look-brokerage .ko-give .line, .look-brokerage .ko-memo-line { color: var(--acc-text); }
.look-brokerage .ko-give .line.bad, .look-brokerage .ko-memo-line.bad { color: var(--risk-text); }
/* The desk. */
.look-brokerage .ko-wrap.deskview { padding: 0; }
.look-brokerage .ko-back { border-color: var(--line-strong); background: var(--panel); color: var(--ink); border-radius: 10px; font-family: var(--sans); }
.look-brokerage .ko-view-toggle { background: var(--track); border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.look-brokerage .ko-view-toggle a { color: var(--muted); font-family: var(--sans); }
.look-brokerage .ko-view-toggle a.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.look-brokerage .ko-memo-now { color: var(--muted); }
.look-brokerage .ko-memo-now input { accent-color: var(--acc); }
.look-brokerage .ko-desk-wrap { max-width: min(100%, calc((100dvh - 190px) * 1.665)); margin: 0 auto; }
.look-brokerage .ko-desk-scene { border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--track); }
.look-brokerage .ko-spot:hover, .look-brokerage .ko-spot:focus-visible { box-shadow: 0 0 0 .2cqw rgba(255,255,255,.95), 0 0 0 .4cqw var(--acc), 0 0 1.6cqw rgba(14,95,107,.4); }
.look-brokerage .ko-spot.empty:hover { box-shadow: 0 0 0 .14cqw rgba(255,255,255,.7); }
.look-brokerage .ko-spot-label { background: rgba(255,255,255,.97); border-color: var(--line-strong); color: var(--ink); font-family: var(--sans); box-shadow: 0 .3cqw 1cqw rgba(10,40,48,.18); }
.look-brokerage .ko-spot-label small { color: var(--muted); }
.look-brokerage .ko-desk-clear { color: var(--muted); }
.look-brokerage .ko-desk-legend button { border-color: var(--line-strong); background: var(--panel); color: var(--ink); font-family: var(--sans); }
.look-brokerage .ko-desk-legend button.brief { border-color: var(--acc); color: var(--acc-text); }
@keyframes ko-glow-teal { 0%, 100% { box-shadow: 0 0 0 .18cqw rgba(255,255,255,.8), 0 0 1cqw rgba(14,95,107,.35); } 50% { box-shadow: 0 0 0 .3cqw rgba(255,255,255,.95), 0 0 2.2cqw rgba(14,95,107,.6); } }
.look-brokerage .ko-spot.brief { animation-name: ko-glow-teal; }
/* A paper off the desk. */
.look-brokerage .ko-overlay { background: rgba(10,30,37,.45); }
.look-brokerage .ko-sheet { background: var(--panel); border-radius: var(--r-lg); color: var(--ink); font-family: var(--sans); }
.look-brokerage .ko-sheet > header, .look-brokerage .ko-sheet > footer { border-color: var(--line); }
.look-brokerage .ko-sheet > footer { background: var(--bg); }
.look-brokerage .ko-sheet .ko-from b, .look-brokerage .ko-sheet .ko-body { color: var(--ink); }
.look-brokerage .ko-sheet .ko-body .draft-tag { background: var(--acc-soft); color: var(--acc-text); }
.look-brokerage .ko-face { border-color: var(--acc); }
.look-brokerage .ko-btn.light { border-color: var(--line-strong); color: var(--ink); background: var(--panel); }
.look-brokerage .ko-btn.light:hover { border-color: var(--acc); }
.look-brokerage .ko-panel h3 { letter-spacing: .1em; white-space: nowrap; }
.look-brokerage .ko-tick .k { white-space: normal; letter-spacing: .08em; line-height: 1.25; }
/* CharterDesk's floor picture is 1586 × 992 (KODO's is 3 : 2): the floor fills the height it has at that shape. */
.look-brokerage .ko-stage .ko-scroll { width: min(100cqw, calc(159.9cqh - 8px)); }
.look-brokerage .ko-room.free { font-family: var(--sans); letter-spacing: .08em; font-weight: 600; }

/* Your desk as a list (TASK-219): the photo desk's piles, in its order. */
.look-brokerage .desk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.look-brokerage .desk-views .seg, .look-brokerage .office-tabs .seg { text-decoration: none; }
.look-brokerage .team-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.look-brokerage .team-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.look-brokerage .team-chip:hover { border-color: var(--acc); }
.look-brokerage .team-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 24%; }
.look-brokerage .team-chip > span { display: grid; line-height: 1.2; }
.look-brokerage .team-chip b { font-size: 13px; }
.look-brokerage .team-chip .meta { font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.look-brokerage .team-chip i, .look-brokerage .team-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.look-brokerage .pile-jump { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 0; z-index: 5; padding: 8px 0; background: var(--bg); }
.look-brokerage .pile-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 500; font-size: 13.5px; text-decoration: none; }
.look-brokerage .pile-chip:hover { border-color: var(--acc); }
.look-brokerage .pile-chip b { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--track); color: var(--muted); font-size: 12px; text-align: center; line-height: 20px; }
.look-brokerage .pile-chip b.on { background: var(--acc); color: #fff; }
.look-brokerage .desk-pile { scroll-margin-top: 64px; }
.look-brokerage .desk-pile.empty { opacity: .78; }
.look-brokerage .pile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.look-brokerage .pile-head h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.look-brokerage .pile-n { min-width: 24px; padding: 0 7px; border-radius: 999px; background: var(--track); color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: center; line-height: 24px; }
.look-brokerage .pile-n.on { background: var(--acc); color: #fff; }
.look-brokerage .pile-hint { flex: 1; min-width: 140px; }
.look-brokerage .row-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 24%; border: 2px solid var(--acc-soft); }
.look-brokerage .desk-pile .move { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
.look-brokerage .ack-list { display: grid; gap: 2px; }
.look-brokerage .ack-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); }
.look-brokerage .ack-row:first-of-type { border-top: 0; }
.look-brokerage .ack-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--panel); color: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, border-color .15s; }
.look-brokerage .ack-check:hover { border-color: var(--acc); color: var(--acc-line); }
.look-brokerage .ack-row.done .ack-check { background: var(--acc); border-color: var(--acc); color: #fff; }
.look-brokerage .ack-row.done .ack-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.look-brokerage .ack-row.risk .ack-text { color: var(--risk-text); font-weight: 500; }
.look-brokerage .ack-row.done.risk .ack-text { color: var(--muted); font-weight: 400; }
.look-brokerage .ack-row .open { display: inline-flex; align-items: center; gap: 4px; color: var(--acc); font-weight: 600; text-decoration: none; font-size: 13.5px; }
.look-brokerage .brief-tldr { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px 14px; margin-bottom: 6px; border-radius: 14px; background: var(--acc-soft); }
.look-brokerage .brief-tldr p { margin: 4px 0 2px; line-height: 1.5; }
.look-brokerage .brief-full { margin-top: 10px; display: grid; gap: 10px; max-width: 72ch; }
.look-brokerage .brief-full p { margin: 0; line-height: 1.6; }
.look-brokerage .brief-part b { display: block; font-size: 13px; letter-spacing: .02em; color: var(--acc-text); margin-bottom: 2px; }
.look-brokerage .meet-list { display: grid; }
.look-brokerage .meet-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.look-brokerage .meet-row:first-child { border-top: 0; }
.look-brokerage .meet-time { display: grid; align-content: start; }
.look-brokerage .meet-time b { font-size: 17px; font-variant-numeric: tabular-nums; }
.look-brokerage .meet-body { display: grid; gap: 3px; min-width: 0; }
.look-brokerage .meet-tldr { margin: 6px 0 0; line-height: 1.5; max-width: 72ch; }
.look-brokerage .office-tabs { margin-bottom: 12px; }
/* The floor a little bigger (Jordon, 9 October: "make the office slightly bigger, to take away a little of that dead
   space"): the cards under it as short as what they hold (202px), the floor the rest. */
/* The floor as wide as its column (Jordon, 13 Oct: "the office floor is a bit small", and empty space under the cards):
   the floor sets the height, the cards under it take only what they hold, and the page scrolls to them if it must. */
.look-brokerage .office-page .ko-wrap.dash { height: auto; min-height: 0; grid-template-rows: auto auto; }
.look-brokerage .office-page .ko-wrap.dash .ko-stage { container-type: normal; display: block; padding: 0; }
.look-brokerage .office-page .ko-wrap.dash .ko-stage .ko-scroll { width: 100%; }
.look-brokerage .office-page .ko-wrap.dash .ko-plan { min-width: 0; }
.look-brokerage .office-page .ko-info { height: auto; padding: 0; border-top: 0; align-items: stretch; }
.look-brokerage .office-page .ko-wrap.dash .ko-side { padding: 0; }
/* The team. */
.look-brokerage .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.look-brokerage .team-card { display: grid; gap: 10px; align-content: start; }
.look-brokerage .team-card p { margin: 0; line-height: 1.5; }
.look-brokerage .team-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.look-brokerage .team-head h2 { margin: 0; font-size: 20px; }
.look-brokerage .team-head > div { display: grid; gap: 2px; }
.look-brokerage .team-face { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; object-position: 50% 24%; border: 1px solid var(--line); }
.look-brokerage .team-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.look-brokerage .team-today { padding-top: 8px; border-top: 1px solid var(--line); }
.look-brokerage .team-today .plan { margin: 6px 0 0; }
.look-brokerage .team-desk a { color: var(--acc); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
/* Ask your assistant, from anywhere: a button in the bottom corner, its panel above it. */
.look-brokerage .ask-fab { position: fixed; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border-radius: 999px; border: 0; background: var(--acc); color: #fff; font: 600 15px var(--sans, inherit); box-shadow: 0 10px 28px -8px rgba(14,95,107,.55), 0 2px 6px rgba(10,40,48,.18); cursor: pointer; }
.look-brokerage .ask-fab:hover { filter: brightness(1.08); }
.look-brokerage .ask-fab[aria-expanded="true"] { background: var(--ink); }
.look-brokerage .ask-pop { position: fixed; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 70; width: min(420px, calc(100vw - 32px)); max-height: min(70dvh, 620px); overflow: auto; padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 60px -18px rgba(10,40,48,.4); }
.look-brokerage .ask-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--acc-text); }
.look-brokerage .ask-pop-head b { flex: 1; color: var(--ink); font-size: 16px; }
.look-brokerage .ask-pop .ask-row { display: flex; gap: 8px; }
.look-brokerage .ask-pop .ask-row input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); font: inherit; }
.look-brokerage .ask-pop .ask-answer { margin-top: 10px; }
@media (max-width: 720px) {
  .look-brokerage .meet-row { grid-template-columns: 1fr; gap: 4px; }
  .look-brokerage .desk-pile .move { grid-template-columns: 44px minmax(0, 1fr); }
  .look-brokerage .ask-fab span { display: none; }
  .look-brokerage .ask-fab { padding: 14px; }
}
.look-brokerage .desk-top { flex-direction: column; align-items: flex-start; }
.look-brokerage .desk-views, .look-brokerage .office-tabs { margin-left: 0; margin-right: auto; width: max-content; }
.look-brokerage .team-card .ask-row { display: flex; gap: 8px; }
.look-brokerage .team-card .ask-row input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font: inherit; }
.look-brokerage .team-card .ask-row input:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
/* The menu scrolls on its own (Jordon: "when you try to scroll on the left tab, it scrolls on the main page"). */
/* Not on a phone, where the menu is a bar across the top (TASK-220: it took the whole screen there). */
@media (min-width: 721px) { .look-brokerage .rail { top: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }
/* Decisions by where each charter is. */
.look-brokerage .pile-groups { display: grid; gap: 14px; }
.look-brokerage .pile-group h3 { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--acc-text); }
.look-brokerage .pile-group h3 .pile-n { margin-left: 2px; line-height: 20px; min-width: 20px; font-size: 11.5px; }
.look-brokerage .pile-group + .pile-group { padding-top: 12px; border-top: 1px solid var(--line); }
.look-brokerage .desk-pile .move { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
.look-brokerage .desk-pile .move-ic { width: 44px; height: 44px; }
.look-brokerage .all-clear { display: flex; align-items: center; gap: 8px; margin: 4px 2px 0; color: var(--muted); }
.look-brokerage .all-clear svg { color: var(--acc); }
/* Every object on the desk shows its outline on hover, empty or not (Jordon: "Theres no little square selector thing
   around the questions side"). */
.look-brokerage .ko-spot.empty:hover, .look-brokerage .ko-spot.empty:focus-visible { box-shadow: 0 0 0 .2cqw rgba(255,255,255,.95), 0 0 0 .4cqw var(--acc-line); }
.look-brokerage .desk-pile .move { padding: 12px 0; }
/* No scroll bars (Jordon, 9 October: "I dont want to see either of the scroll bars"): the menu and the page still
   scroll, by wheel, trackpad or keys. */
html:has(> body.look-brokerage), .look-brokerage .rail { scrollbar-width: none; -ms-overflow-style: none; }
html:has(> body.look-brokerage)::-webkit-scrollbar, .look-brokerage .rail::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* A charter's file (TASK-220): one page a charter. The stages along the top (sticky), then each stage: done ones folded to
 * a line, the one it's at open with its work, the ones to come faint and dashed. */
.look-brokerage .client-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 10px; }
.look-brokerage .client-tools input[type=search] { flex: 1 1 260px; min-width: 0; font: inherit; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.look-brokerage .client-order { display: inline-flex; align-items: center; gap: 8px; }
.look-brokerage .client-order select { font: inherit; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.look-brokerage .client-filters { flex-basis: 100%; padding-left: 0; border-left: 0; }
.look-brokerage .charters-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
/* Board and List as links (on a filter's page): the same toggle as on the board, never an underlined link. */
.look-brokerage a.seg { display: inline-flex; align-items: center; text-decoration: none; }
.look-brokerage a.seg:hover { color: var(--ink); background: var(--panel, #fff); }
.look-brokerage .charter-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 16px; border-left: 1px solid var(--line, #dfe7e8); }
.look-brokerage .filter-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line, #dfe7e8); color: var(--ink, #10201f); text-decoration: none; font-size: 14px; background: var(--card, #fff); }
.look-brokerage .filter-chip:hover { border-color: var(--acc, #0e5f6b); }
.look-brokerage .filter-chip.on { background: var(--acc-soft, #e3f1f2); border-color: var(--acc, #0e5f6b); color: var(--acc-text, #0e5f6b); font-weight: 600; }
@media (max-width: 720px) { .look-brokerage .charter-filters { padding-left: 0; border-left: 0; } }
.look-brokerage .adviser-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.look-brokerage .day-asks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.look-brokerage .day-answer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.look-brokerage .day-answer textarea { flex: 1 1 260px; }
.look-brokerage .cust-order { display: inline-flex; gap: 4px; }
.look-brokerage .cf-move { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; }
.look-brokerage .cf-move select { max-width: 100%; }
.look-brokerage .cf-spine { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); padding: 10px 0 8px; margin: -10px 0 -6px; background: var(--bg); }
.look-brokerage .cf-pill { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 6px 4px 8px; border-radius: 12px; color: var(--muted); text-decoration: none; text-align: center; min-width: 0; }
.look-brokerage .cf-pill::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--line-strong); }
.look-brokerage .cf-pill:first-child::before { display: none; }
.look-brokerage .cf-pill.done::before, .look-brokerage .cf-pill.now::before { background: var(--acc); }
.look-brokerage .cf-pill:hover { background: var(--hover); }
.look-brokerage .cf-pill.now { background: var(--acc-soft); }
.look-brokerage .cf-pill-text { display: grid; justify-items: center; min-width: 0; max-width: 100%; line-height: 1.25; }
.look-brokerage .cf-pill b { color: var(--ink); font-weight: 600; font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-brokerage .cf-when { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-brokerage .cf-dot { position: relative; z-index: 1; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; background: var(--panel); }
.look-brokerage .cf-dot .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.look-brokerage .cf-pill.done .cf-dot { background: var(--acc); border-color: var(--acc); color: #fff; }
.look-brokerage .cf-pill.now .cf-dot { border-color: var(--acc); box-shadow: 0 0 0 4px rgba(14,95,107,.16); }
.look-brokerage .cf-pill.now .cf-when { color: var(--acc); font-weight: 600; }
.look-brokerage .cf-pill.ahead .cf-dot, .look-brokerage .cf-pill.skipped .cf-dot { border-style: dashed; }
.look-brokerage .cf-pill.ahead b, .look-brokerage .cf-pill.skipped b { color: var(--muted); font-weight: 500; }
.look-brokerage .cf-pill.late .cf-when { color: var(--risk-text); font-weight: 600; }
.look-brokerage .cf-pill.late .cf-dot { border-color: var(--risk-text); }
.look-brokerage .cf-stages { display: grid; gap: 10px; }
.look-brokerage .cf-stage { scroll-margin-top: 84px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.look-brokerage .cf-stage.now { border: 2px solid var(--acc); box-shadow: var(--shadow); }
.look-brokerage .cf-stage.ahead, .look-brokerage .cf-stage.skipped { background: transparent; border: 1px dashed var(--line-strong); }
.look-brokerage .cf-stage.late:not(.now) { border-color: var(--risk-line); }
.look-brokerage .cf-head { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 18px; background: none; border: 0; border-radius: inherit; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.look-brokerage .cf-head:hover .cf-more { text-decoration: underline; }
.look-brokerage .cf-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--track); color: var(--muted); }
.look-brokerage .cf-stage.done .cf-ic { background: var(--acc-soft); color: var(--acc); }
.look-brokerage .cf-stage.now .cf-ic { background: var(--acc); color: #fff; }
.look-brokerage .cf-title { display: grid; gap: 1px; min-width: 0; }
.look-brokerage .cf-title b { font-size: 15.5px; }
.look-brokerage .cf-sum { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-brokerage .cf-stage.ahead .cf-title b, .look-brokerage .cf-stage.skipped .cf-title b { color: var(--muted); font-weight: 500; }
.look-brokerage .cf-stage.now .cf-sum, .look-brokerage .cf-head[aria-expanded="true"] .cf-sum { white-space: normal; }
.look-brokerage .cf-more { color: var(--acc); font-size: 13px; font-weight: 600; min-width: 34px; text-align: right; }
.look-brokerage .cf-body { display: grid; gap: 16px; padding: 16px 18px 18px; border-top: 1px solid var(--line); min-width: 0; }
.look-brokerage .cf-body .panel { box-shadow: none; }
.look-brokerage .cf-lede { margin: 0; color: var(--muted); }
.look-brokerage .cf-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.look-brokerage .cf-work { display: grid; gap: 14px; min-width: 0; }
.look-brokerage .cf-quiet { margin: 0; }
.look-brokerage .cf-rows { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.look-brokerage .cf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); }
.look-brokerage .cf-row-text { display: grid; gap: 2px; min-width: 0; }
.look-brokerage .cf-row:first-child { border-top: 0; }
.look-brokerage .cf-task { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--warn-line); background: var(--warn-soft); }
.look-brokerage .cf-task.late { border-color: var(--risk-line); background: var(--risk-soft); }
.look-brokerage .cf-task-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.look-brokerage .cf-task p { margin: 0; }
.look-brokerage .cf-task .cf-do { font-weight: 500; }
.look-brokerage .cf-task .task { border: 0; padding: 0; margin: 4px 0 0; background: none; box-shadow: none; }
.look-brokerage .cf-task .task > .head, .look-brokerage .cf-task .task > .meta { display: none; }
.look-brokerage .cf-start { display: grid; gap: 10px; justify-items: start; }
.look-brokerage .cf-start-form { width: 100%; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.look-brokerage .cf-start-form .actions { grid-column: 1 / -1; }
.look-brokerage .cf-money { display: flex; gap: 6px; }
.look-brokerage .cf-money input { min-width: 0; flex: 1; }
.look-brokerage .cf-empty { display: grid; gap: 10px; justify-items: start; }
.look-brokerage .cf-empty p { margin: 0; }
.look-brokerage .cf-history summary { cursor: pointer; color: var(--muted); font-size: 13.5px; }
.look-brokerage .cf-history .story-steps { padding: 10px 0 0 4px; }
.look-brokerage .cf-docs li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.look-brokerage .cf-docs li > span { display: grid; }
/* A stage's own page inside the charter's: the contract over the whole width, her choices and the checks above it. */
.look-brokerage .cf-body .contract-layout { grid-template-columns: minmax(0, 1fr); }
.look-brokerage .cf-body .inq { grid-template-columns: minmax(0, 1fr); }
.look-brokerage .cf-body .inq-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.look-brokerage .cf-body .inq-side > :first-child { grid-column: 1 / -1; }
.look-brokerage .cf-body .inq-side > :last-child { flex: none; }
.look-brokerage .cf-docs a, .look-brokerage .cf-docs .linkish { color: var(--acc); font-weight: 600; white-space: nowrap; }
.look-brokerage .cf-body .contract-side { position: static; order: -1; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.look-brokerage .paper-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.look-brokerage .contract-doc.full { position: fixed; inset: 0; z-index: 60; overflow: auto; background: var(--bg); padding: 24px clamp(16px, 4vw, 48px) 48px; justify-items: center; align-content: start; }
.look-brokerage .contract-doc.full .paper-bar { position: sticky; top: 0; width: min(820px, 100%); background: var(--bg); padding: 8px 0; z-index: 1; }
.look-brokerage .contract-doc.full .paper { width: min(820px, 100%); }
@media (max-width: 720px) {
  .look-brokerage .cf-spine { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .look-brokerage .cf-spine::-webkit-scrollbar { display: none; }
  .look-brokerage .cf-pill { flex: 0 0 88px; }
  .look-brokerage .cf-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  .look-brokerage .cf-head .chip { display: none; }
  .look-brokerage .cf-row { grid-template-columns: minmax(0, 1fr) auto; }
  .look-brokerage .cf-row > .linkish { grid-column: 1 / -1; }
}
/* A meeting's brief over the page (TASK-223, Jordon: "Make it a pop up"). */
.look-brokerage .brief-pop-back { position: fixed; inset: 0; z-index: 70; background: rgba(10,30,37,.38); display: grid; place-items: center; padding: 24px; }
.look-brokerage .brief-pop { width: min(700px, 100%); max-height: min(82vh, 900px); overflow: auto; background: var(--panel); border-radius: var(--r-lg); box-shadow: 0 30px 80px -30px rgba(5,40,48,.55); padding: 26px 30px 30px; display: grid; gap: 14px; justify-items: start; }
.look-brokerage .brief-pop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; width: 100%; }
.look-brokerage .brief-pop-head h2 { margin: 6px 0 4px; font-size: 24px; letter-spacing: -.01em; line-height: 1.2; }
.look-brokerage .brief-pop-head p { margin: 0; }
.look-brokerage .brief-pop-text { margin-top: 0; max-width: none; }
/* Shows & events (TASK-224; Jordon: "each show have just the name/date and description showing, then expand"): a show folded
   to its date tile, name, days, what it is and how far she is; opened to the show, people to meet, meetings, the trip, after. */
.look-brokerage .panel.show { padding: 0; overflow: hidden; }
.look-brokerage .show-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 18px 22px; cursor: pointer; border-radius: inherit; }
.look-brokerage .show-head:hover { background: var(--hover); }
.look-brokerage .show-head:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.look-brokerage .show-date { display: grid; justify-items: center; align-content: center; gap: 2px; width: 64px; height: 64px; border-radius: 14px; background: var(--acc-soft); color: var(--acc); }
.look-brokerage .show-date b { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.look-brokerage .show-date span { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.look-brokerage .show.over .show-date { background: var(--track); color: var(--muted); }
.look-brokerage .show-title { display: grid; gap: 4px; min-width: 0; }
.look-brokerage .show-title h2 { margin: 0; font-size: 19px; line-height: 1.25; text-wrap: balance; }
.look-brokerage .show-days { color: var(--muted); font-weight: 500; }
.look-brokerage .show-about { margin: 2px 0 0; color: #2b4750; max-width: 72ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.look-brokerage .show.is-open .show-about { -webkit-line-clamp: unset; display: block; }
.look-brokerage .show-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.look-brokerage .show-more { align-self: center; color: var(--acc); font-weight: 600; font-size: 13.5px; }
.look-brokerage .show-body { display: grid; gap: 0; border-top: 1px solid var(--line); }
.look-brokerage .show-part { padding: 18px 22px 20px 104px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.look-brokerage .show-part:first-child { border-top: 0; }
.look-brokerage .show-part-head { display: flex; align-items: center; gap: 10px; }
.look-brokerage .show-part-head h3 { margin: 0; font-size: 15px; flex: 1; }
.look-brokerage .show-part-ic { width: 28px; height: 28px; margin-left: -40px; border-radius: 50%; background: var(--acc-soft); color: var(--acc); display: grid; place-items: center; }
.look-brokerage .show-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.look-brokerage .show-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.look-brokerage .show-facts dt { color: var(--muted); font-size: 13px; padding-top: 1px; }
.look-brokerage .show-facts dd { margin: 0; }
.look-brokerage .show-facts dd p, .look-brokerage .show .research p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.look-brokerage .show-people { display: grid; gap: 8px; }
.look-brokerage .show-person { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "av who acts" "av why why"; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.look-brokerage .show-person > .avatar { grid-area: av; align-self: start; }
.look-brokerage .show-person > .show-who { grid-area: who; }
.look-brokerage .show-person > .show-why { grid-area: why; }
.look-brokerage .show-person > .show-acts { grid-area: acts; }
.look-brokerage .show-person > .show-when { grid-area: when; }
.look-brokerage .show-person .chip, .look-brokerage .show-chips .chip { white-space: nowrap; }
.look-brokerage .show-person .avatar { width: 36px; height: 36px; font-size: 13px; }
.look-brokerage .show-person.suggested { border-style: dashed; background: var(--bg); }
.look-brokerage .show-person.meeting { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) auto; grid-template-areas: "when who acts"; }
.look-brokerage .show-who { min-width: 0; overflow-wrap: anywhere; }
.look-brokerage .show-where { display: block; }
.look-brokerage .show-when { color: var(--acc); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.look-brokerage .show-why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: 13.5px; color: #2b4750; }
.look-brokerage .show-known { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.look-brokerage .show-known .chip { display: inline-flex; align-items: center; gap: 4px; }
.look-brokerage .show-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.look-brokerage .btn.small { padding: 6px 11px; font-size: 13px; gap: 5px; }
.look-brokerage .show-remind { display: inline-flex; gap: 6px; align-items: center; }
.look-brokerage .show-remind input { margin: 0; padding: 5px 8px; width: auto; }
.look-brokerage .show-draft { margin: 6px 0 2px 48px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 6px; }
.look-brokerage .show-draft-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.look-brokerage .show-draft-head h4 { margin: 0; }
.look-brokerage .show-draft-head .btn { margin-left: auto; }
.look-brokerage .show-meet-form { padding: 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.look-brokerage .show-outcome { margin: 4px 0 0; }
.look-brokerage .show-nobody { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 13.5px; }
.look-brokerage .show-nobody p { margin: 0; color: #2b4750; }
.look-brokerage .show details.fold > summary { display: flex; align-items: center; gap: 6px; }
.look-brokerage .show-acts .linkish { font-size: 13px; font-weight: 500; color: var(--muted); padding: 6px 4px; }
.look-brokerage .show-acts .linkish:hover { color: var(--acc); }
@media (max-width: 720px) {
  .look-brokerage .show-head { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
  .look-brokerage .show-date { width: 48px; height: 52px; }
  .look-brokerage .show-date b { font-size: 19px; }
  .look-brokerage .show-more { grid-column: 2; justify-self: start; }
  .look-brokerage .show-part { padding: 16px; }
  .look-brokerage .show-part-ic { margin-left: 0; }
  .look-brokerage .show-person { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "av who" "why why" "acts acts"; row-gap: 8px; }
  .look-brokerage .show-person.meeting { grid-template-columns: minmax(0, 1fr); grid-template-areas: "when" "who" "acts"; }
  .look-brokerage .show-person .show-acts { justify-content: flex-start; }
  .look-brokerage .show-facts { grid-template-columns: 1fr; gap: 2px; }
  .look-brokerage .show-facts dd { margin-bottom: 8px; }
  .look-brokerage .show-draft { margin-left: 0; }
}
/* A client's page (TASK-226): who they are and where their charter stands; what needs her (alerts); where things stand
   (what was talked about, whose turn, what waits on whom, word for word); their charters and her notes; contact and dates. */
.look-brokerage .cl-head { grid-template-columns: 72px minmax(0, 1fr) auto; }
.look-brokerage .cl-head-text { display: grid; gap: 6px; min-width: 0; }
.look-brokerage .cl-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #2b4750; }
.look-brokerage .cl-alerts { display: grid; gap: 8px; margin-top: 16px; }
.look-brokerage .cl-alert { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); box-shadow: inset 4px 0 0 var(--acc); }
.look-brokerage .cl-alert.warn { box-shadow: inset 4px 0 0 var(--warn); background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line); }
.look-brokerage .cl-alert.risk { box-shadow: inset 4px 0 0 var(--risk-text, #b4432f); background: var(--risk-soft); color: var(--risk-text); }
.look-brokerage .cl-alert.info { box-shadow: inset 4px 0 0 var(--acc); background: var(--acc-soft); }
.look-brokerage .cl-alert .btn { background: var(--panel); }
.look-brokerage .cl-stands { margin-top: 16px; display: grid; gap: 12px; }
.look-brokerage .cl-stands .card-head h2 { margin: 0; }
.look-brokerage .cl-stands > .meta { margin: -4px 0 0; }
.look-brokerage .cl-stands-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.look-brokerage .cl-sum { display: grid; gap: 12px; min-width: 0; }
.look-brokerage .cl-talk { display: grid; gap: 0; }
.look-brokerage .cl-year { margin: 4px 0 6px 76px; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
.look-brokerage .cl-year:not(:first-child) { margin-top: 10px; }
.look-brokerage .cl-talk-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; }
.look-brokerage .cl-when { text-align: right; padding-top: 1px; color: var(--acc); font-weight: 600; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.look-brokerage .cl-talk-row p { position: relative; margin: 0; padding: 0 0 12px 16px; border-left: 2px solid var(--track); line-height: 1.5; }
.look-brokerage .cl-talk-row p::before { content: ''; position: absolute; left: -5px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.look-brokerage .cl-talk-row:last-child p { padding-bottom: 2px; }
/* The cards under it in two columns that come out even (TASK-228), each a tidy block: no browser margins on titles. */
.look-brokerage .cl-cards { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.look-brokerage .cl-col { display: grid; gap: 16px; min-width: 0; }
.look-brokerage .cl-col > .panel { display: grid; gap: 10px; margin: 0; padding: 18px 20px; }
.look-brokerage .cl-cards .card-head { margin: 0; }
.look-brokerage .cl-cards .panel > * { margin-top: 0; }
.look-brokerage .cl-cards h3 { margin: 0; font-size: 16px; }
.look-brokerage .cl-cards .inq-label { display: block; }
.look-brokerage .cl-cards .cl-charters { margin: 0 0 4px; }
.look-brokerage .cl-cards .empty-note { margin: 0; padding: 0; }
.look-brokerage .cl-cards details.fold > summary { padding: 2px 0; }
.look-brokerage .cl-cards .ps-card > p { margin: 0; }
@media (max-width: 900px) { .look-brokerage .cl-cards { grid-template-columns: minmax(0, 1fr); } }
.look-brokerage .cl-sum-part { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r); background: var(--bg); }
.look-brokerage .cl-sum-part p { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.look-brokerage .cl-turn { display: grid; gap: 12px; align-content: start; }
.look-brokerage .cl-turn-now { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r); background: var(--acc-soft); box-shadow: inset 4px 0 0 var(--acc); }
.look-brokerage .cl-turn-now b { font-size: 22px; letter-spacing: -.01em; }
.look-brokerage .cl-turn-now a { color: var(--ink); font-weight: 500; }
.look-brokerage .cl-turn-now.them, .look-brokerage .cl-turn-now.agent { background: var(--bg); box-shadow: inset 4px 0 0 var(--line-strong); }
.look-brokerage .cl-turn-now.none { background: var(--bg); box-shadow: none; }
.look-brokerage .cl-waits ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.look-brokerage .cl-waits li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; line-height: 1.4; }
.look-brokerage .cl-waits a { color: var(--ink); }
.look-brokerage .cl-who { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--track); color: var(--muted); white-space: nowrap; }
.look-brokerage .cl-who.you { background: var(--acc); color: #fff; }
.look-brokerage .cl-who.them { background: var(--warn-soft); color: var(--warn-text); }
.look-brokerage .cl-words { border-top: 1px solid var(--line); padding-top: 10px; }
.look-brokerage .cl-words > summary { cursor: pointer; color: var(--acc); font-weight: 600; list-style: none; padding: 4px 0; }
.look-brokerage .cl-words > summary::-webkit-details-marker { display: none; }
.look-brokerage .cl-words[open] > summary { margin-bottom: 10px; }
.look-brokerage .cl-threads { display: grid; gap: 8px; }
.look-brokerage .cl-thread { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.look-brokerage .cl-thread > .notes-full { padding: 0 14px 12px; }
.look-brokerage .cl-thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; padding: 11px 14px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.look-brokerage button.cl-thread-head:hover { background: var(--hover); }
.look-brokerage .cl-thread-head .meta { margin-left: auto; }
.look-brokerage .cl-msgs { display: grid; gap: 10px; padding: 4px 14px 14px; }
.look-brokerage .cl-msg { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg); max-width: 80ch; }
.look-brokerage .cl-msg.mine { background: var(--acc-soft); justify-self: end; }
.look-brokerage .cl-msg-head { display: flex; gap: 8px; align-items: baseline; }
.look-brokerage .cl-msg .notes-full { margin: 0; }
.look-brokerage .cl-cols > .stack { min-width: 0; }
.look-brokerage .cl-charters { display: grid; gap: 8px; margin: 6px 0 14px; }
.look-brokerage .cl-charter { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.look-brokerage .cl-charter:hover { border-color: var(--acc); background: var(--hover); }
.look-brokerage .cl-charter > div { display: grid; gap: 2px; min-width: 0; }
.look-brokerage .cl-fb { display: grid; gap: 4px; margin-top: 6px; }
.look-brokerage .cl-notes .card-head .chip { display: inline-flex; align-items: center; gap: 4px; }
.look-brokerage .cl-likes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.look-brokerage .cl-likes > div { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: var(--r); background: var(--bg); }
.look-brokerage .cl-likes ul { margin: 0; }
.look-brokerage .cl-add { display: flex; gap: 6px; }
.look-brokerage .cl-add input { margin: 0; min-width: 0; flex: 1; }
.look-brokerage .cl-notes textarea { width: 100%; margin-top: 6px; font: inherit; line-height: 1.5; }
.look-brokerage .ps-edit textarea { font: inherit; line-height: 1.45; }
.look-brokerage .cl-dates { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.look-brokerage .cl-dates li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; }
.look-brokerage .cl-date-tile { display: grid; justify-items: center; width: 48px; height: 48px; align-content: center; border-radius: 12px; background: var(--acc-soft); color: var(--acc); }
.look-brokerage .cl-date-tile b { font-size: 18px; line-height: 1; }
.look-brokerage .cl-date-tile span { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.look-brokerage .cl-contact { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.look-brokerage .cl-contact dt { color: var(--muted); }
.look-brokerage .cl-contact dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .look-brokerage .cl-stands-body, .look-brokerage .cl-likes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .look-brokerage .cl-head { grid-template-columns: 56px minmax(0, 1fr); }
  .look-brokerage .cl-head .actions { grid-column: 1 / -1; }
  .look-brokerage .cl-alert { grid-template-columns: 22px minmax(0, 1fr); }
  .look-brokerage .cl-alert .btn { grid-column: 2; justify-self: start; }
  .look-brokerage .cl-charter { grid-template-columns: minmax(0, 1fr) auto; }
  .look-brokerage .cl-charter > svg { display: none; }
}
/* Their preference sheet (TASK-226): kept for every charter; diets and allergies marked; one row per guest. */
.look-brokerage .ps-card { display: grid; gap: 12px; }
.look-brokerage .ps-card .card-head .actions { margin: 0; }
.look-brokerage .ps-card > p { margin: 0; }
.look-brokerage .ps-ways { display: flex; flex-wrap: wrap; gap: 8px; }
.look-brokerage .ps-drop { position: relative; }
.look-brokerage .ps-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.look-brokerage .ps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.look-brokerage .ps-grid textarea { width: 100%; }
.look-brokerage .ps-special > .label, .look-brokerage .ps-parts dt.ps-special { color: var(--warn-text); font-weight: 600; }
.look-brokerage .ps-guests-edit { display: grid; gap: 6px; }
.look-brokerage .ps-guest-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 6px; align-items: center; }
.look-brokerage .ps-guest-row input, .look-brokerage .ps-guest-row select { margin: 0; min-width: 0; }
.look-brokerage .ps-guest-row .linkish { font-size: 18px; color: var(--muted); padding: 0 6px; }
.look-brokerage .ps-parts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.look-brokerage .ps-parts dt { color: var(--muted); }
.look-brokerage .ps-parts dd { margin: 0; }
.look-brokerage .ps-parts dd p { margin: 0; }
.look-brokerage .ps-guests { display: grid; gap: 6px; margin-top: 12px; }
.look-brokerage .ps-table { display: grid; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.look-brokerage .ps-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 13.5px; overflow-wrap: anywhere; }
.look-brokerage .ps-row:first-child { border-top: 0; }
.look-brokerage .ps-th { background: var(--bg); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.look-brokerage .ps-diet { color: var(--warn-text); font-weight: 600; }
@media (max-width: 900px) {
  .look-brokerage .ps-grid { grid-template-columns: minmax(0, 1fr); }
  .look-brokerage .ps-guest-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; }
  .look-brokerage .ps-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .look-brokerage .ps-th { display: none; }
  .look-brokerage .ps-parts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .look-brokerage .ps-parts dd { margin-bottom: 8px; }
}
/* TASK-227: what they're worth and owe; when they usually charter; the yachts they know with her verdict; gifts sent. */
.look-brokerage .cl-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.look-brokerage .cl-usual { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 9px 12px; border-radius: var(--r); background: var(--bg); color: #2b4750; }
.look-brokerage .cl-yachts { display: grid; gap: 8px; }
.look-brokerage .cl-yacht { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.look-brokerage .cl-yacht > div:first-child { display: grid; gap: 2px; min-width: 0; }
.look-brokerage .cl-yacht a { color: var(--ink); text-decoration: none; }
.look-brokerage .cl-yacht a:hover b { color: var(--acc); }
.look-brokerage .cl-yacht.loved { box-shadow: inset 4px 0 0 var(--acc); }
.look-brokerage .cl-yacht.never_again { box-shadow: inset 4px 0 0 var(--risk-text, #b4432f); }
.look-brokerage .cl-verdicts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.look-brokerage .cl-verdicts .chip { border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; font: inherit; font-size: 12.5px; }
.look-brokerage .cl-verdicts .chip:hover { border-color: var(--acc); }
.look-brokerage .cl-verdicts .chip.picked { font-weight: 600; border-color: transparent; }
.look-brokerage .cl-verdicts .chip.on.picked { background: var(--track); color: var(--ink); }
.look-brokerage .cl-verdicts .chip.ok.picked { background: var(--acc-soft); color: var(--acc); }
.look-brokerage .cl-verdicts .chip.risk.picked { background: var(--risk-soft); color: var(--risk-text); }
.look-brokerage .cl-gifts { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.look-brokerage .cl-gifts li { display: grid; gap: 1px; padding-left: 12px; border-left: 3px solid var(--acc-soft); }
@media (max-width: 720px) { .look-brokerage .cl-yacht { grid-template-columns: minmax(0, 1fr); } .look-brokerage .cl-verdicts { justify-content: flex-start; } }
/* TASK-229: the calendar by day, week or month; the Yacht Book's tabs and full width; requests added beside the list; who
   is on the water on My day. */
.look-brokerage .cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.look-brokerage .cal-bar .actions { margin: 0; }
.look-brokerage .cal-modes .seg, .look-brokerage .yb-tabs .seg { text-decoration: none; color: inherit; }
.look-brokerage .weekday-h { color: inherit; text-decoration: none; }
.look-brokerage .weekday-h:hover h3 { color: var(--acc); }
.look-brokerage .cal-day { display: grid; gap: 0; padding: 6px 20px; }
.look-brokerage .cal-day-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.look-brokerage .cal-day-row:first-child { border-top: 0; }
.look-brokerage .cal-day-row.busy, .look-brokerage .cal-day-row.past { color: var(--muted); }
.look-brokerage .cal-day-time { color: var(--acc); font-weight: 600; font-variant-numeric: tabular-nums; }
.look-brokerage .cal-day-what { display: grid; gap: 2px; min-width: 0; }
.look-brokerage .month { padding: 12px; }
.look-brokerage .month-head, .look-brokerage .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.look-brokerage .month-head span { padding: 4px 8px 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.look-brokerage .mday { display: grid; align-content: start; gap: 3px; min-height: 104px; min-width: 0; padding: 8px; border-radius: 12px; background: var(--bg); color: var(--ink); text-decoration: none; overflow: hidden; }
.look-brokerage .mday:hover { box-shadow: inset 0 0 0 1px var(--acc); }
.look-brokerage .mday.out { opacity: .45; }
.look-brokerage .mday.today { background: var(--acc-soft); box-shadow: inset 0 0 0 2px var(--acc); }
.look-brokerage .mday-n { font-weight: 600; font-variant-numeric: tabular-nums; }
.look-brokerage .mev { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; padding: 2px 6px; border-radius: 6px; background: var(--panel); border-left: 3px solid var(--acc); }
.look-brokerage .mev i { font-style: normal; color: var(--acc); font-weight: 600; }
.look-brokerage .mev.busy { border-left-color: var(--line-strong); color: var(--muted); }
.look-brokerage .mev.more { background: none; border: 0; color: var(--muted); }
.look-brokerage .yb-tabs { margin-bottom: 12px; align-self: start; }
.look-brokerage .yb-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 16px; }
.look-brokerage .yb-add .add-yacht-name { display: flex; gap: 6px; flex: 1; min-width: 260px; max-width: 460px; }
.look-brokerage .yb-add input { margin: 0; flex: 1; min-width: 0; }
.look-brokerage .req-add { display: grid; gap: 10px; }
.look-brokerage .req-add h2 { margin: 0; font-size: 19px; }
.look-brokerage .req-add h3 { margin: 6px 0 0; font-size: 14.5px; }
.look-brokerage .at-sea h2 { margin: 0 0 8px; font-size: 19px; }
@media (max-width: 720px) {
  .look-brokerage .cal-day-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .look-brokerage .month-head span { padding: 2px; font-size: 10.5px; letter-spacing: 0; }
  .look-brokerage .month-head, .look-brokerage .month-grid { gap: 3px; }
  .look-brokerage .mday { min-height: 56px; padding: 4px; }
  .look-brokerage .mev { font-size: 0; padding: 0; height: 5px; border-left-width: 0; background: var(--acc); }
  .look-brokerage .mev.more { display: none; }
}
/* On the water (TASK-230): three lanes of charters, each a checklist of what to see to. */
.look-brokerage .otw-tabs { margin: 0 0 12px; }
.look-brokerage .otw-tabs .seg { text-decoration: none; color: inherit; }
.look-brokerage .otw-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.look-brokerage .otw-lane { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 12px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .45); border: 1px solid var(--line); }
.look-brokerage .otw-lane .group-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 2px 4px; }
.look-brokerage .otw-lane > .empty-note { margin: 0 4px 6px; }
.look-brokerage .otw-card { display: grid; gap: 12px; padding: 18px 20px; }
.look-brokerage .otw-card.lane-sea { box-shadow: inset 4px 0 0 var(--acc), var(--shadow); }
.look-brokerage .otw-card.lane-back { box-shadow: inset 4px 0 0 var(--line-strong), var(--shadow); }
.look-brokerage .otw-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.look-brokerage .otw-head > div { display: grid; gap: 2px; min-width: 0; }
.look-brokerage .otw-head h3 { margin: 0; font-size: 17px; }
.look-brokerage .otw-head h3 a { color: var(--ink); text-decoration: none; }
.look-brokerage .otw-head h3 a:hover { color: var(--acc); }
.look-brokerage .otw-progress { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.look-brokerage .otw-progress span { display: block; height: 100%; background: var(--acc); border-radius: inherit; }
.look-brokerage .otw-checks { display: grid; gap: 2px; }
.look-brokerage .otw-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; line-height: 1.45; font-size: 14px; }
.look-brokerage a.otw-check:hover { background: var(--hover); }
.look-brokerage .otw-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--track); color: var(--muted); font-weight: 700; margin-top: 1px; }
.look-brokerage .otw-check.ok { color: var(--muted); }
.look-brokerage .otw-check.ok .otw-mark { background: var(--acc-soft); color: var(--acc); }
.look-brokerage .otw-check.todo .otw-mark { background: var(--warn-soft); color: var(--warn-text); }
.look-brokerage .otw-check.late { color: var(--risk-text); }
.look-brokerage .otw-check.late .otw-mark { background: var(--risk-soft); color: var(--risk-text); }
.look-brokerage .otw-check.info .otw-mark { background: var(--acc-soft); color: var(--acc); }
.look-brokerage .otw-verdict { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.look-brokerage .otw-foot { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Requests read as asking for nothing (TASK-230): together and quiet. */
.look-brokerage .req-quiet { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r); background: var(--bg); }
.look-brokerage .req-quiet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.look-brokerage .req-quiet-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; font-size: 13.5px; color: #2b4750; }
.look-brokerage .req-quiet-row > .req-card { margin-top: 8px; }
@media (max-width: 1100px) { .look-brokerage .otw-lanes { grid-template-columns: minmax(0, 1fr); } }
/* The fleet's words (TASK-231): confirmed, requested, held, the owner's use, maintenance, unavailable, nothing recorded. */
.look-brokerage .plan-block.confirmed, .look-brokerage .plan-key.confirmed { background: var(--acc); color: #fff; }
.look-brokerage .plan-block.requested, .look-brokerage .plan-key.requested { background: repeating-linear-gradient(45deg, var(--acc-soft) 0 6px, #fff 6px 12px); color: var(--ink); border: 2px solid var(--acc); }
.look-brokerage .plan-block.held, .look-brokerage .plan-key.held { background: var(--acc-soft); color: var(--ink); border: 2px dashed var(--acc); }
.look-brokerage .plan-block.owner, .look-brokerage .plan-key.owner { background: #2b4750; color: #fff; }
.look-brokerage .plan-block.maintenance, .look-brokerage .plan-key.maintenance { background: var(--warn-soft); color: var(--warn-text); border: 2px solid var(--warn); }
.look-brokerage .plan-block.unavailable, .look-brokerage .plan-key.unavailable { background: var(--track); color: var(--muted); }
.look-brokerage .plan-key.unknown { background: var(--hover); border: 1px solid var(--line); }
.look-brokerage .ask-checked { margin-top: 6px; font-size: 12.5px; }
/* On a phone (TASK-231): five places along the bottom, the rest under More; the board one column; the Ask button above it. */
.look-brokerage .phone-bar, .look-brokerage .phone-more { display: none; }
@media (max-width: 720px) {
  .look-brokerage .rail .nav, .look-brokerage .rail-foot { display: none; }
  .look-brokerage .phone-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--rail); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .look-brokerage .phone-bar .nav { display: grid; justify-items: center; gap: 2px; padding: 5px 2px; font-size: 11px; border-radius: 10px; min-width: 0; }
  .look-brokerage .phone-bar .nav .nav-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .look-brokerage .phone-more { display: block; position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 59; background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -16px rgba(10,40,48,.3); padding: 12px; }
  .look-brokerage .phone-more[hidden] { display: none; }
  .look-brokerage .phone-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .look-brokerage .phone-more-grid .nav { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; font-size: 12px; }
  .look-brokerage .main { padding-bottom: 100px; }
  .look-brokerage .ask-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  /* The popup above the button, never over it (TASK-239, item 9). */
  .look-brokerage .ask-pop { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 220px); overflow-y: auto; }
  .look-brokerage .crm-board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .look-brokerage .crm-col { min-height: 0; }
  .look-brokerage .topbar .btn.new .nav-label { display: none; }
}

/* Tell the assistant (TASK-232, item 18): one sheet from the top-right button; what it understood said back in a line. */
.look-brokerage .tell-sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(10,40,48,.38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.look-brokerage .tell-sheet[hidden] { display: none; }
.look-brokerage .tell-card { width: min(580px, 100%); max-height: min(90dvh, 760px); overflow: auto; background: var(--panel); border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(10,40,48,.5); padding: 18px; display: grid; gap: 12px; }
.look-brokerage .tell-head { display: flex; align-items: center; gap: 8px; color: var(--acc-text); }
.look-brokerage .tell-head b { flex: 1; color: var(--ink); font-size: 17px; }
.look-brokerage .tell-card .form { display: grid; gap: 12px; }
.look-brokerage .tell-card .dictation { min-height: 110px; font-size: 17px; line-height: 1.5; width: 100%; }
.look-brokerage .tell-kinds { flex-wrap: wrap; margin: 0; }
.look-brokerage .tell-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.look-brokerage .tell-fields > [hidden] { display: none; }
.look-brokerage .tell-heard { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--acc-soft); color: #2b4750; display: flex; gap: 8px; align-items: flex-start; }
/* The reply on the conversation page (item 17) and the reminders on My day (item 18). */
.look-brokerage .reply-card .show-draft { margin-left: 0; }
.look-brokerage .reply-form { display: grid; gap: 10px; margin-top: 8px; }
.look-brokerage .reply-form textarea { width: 100%; font: inherit; }
.look-brokerage .rem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.look-brokerage .rem { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); }
.look-brokerage .rem.late { background: var(--warn-soft); border-color: var(--warn-line); }

/* The quote (TASK-233, item 19), the payment schedule (22) and the page as the client sees it (22). */
.look-brokerage .quote { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); margin-top: 10px; }
.look-brokerage .quote-lines { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.look-brokerage .quote-lines dt { color: var(--muted); }
.look-brokerage .quote-lines dd { margin: 0; }
.look-brokerage .quote-total { margin: 0; font-size: 17px; }
.look-brokerage .quote-mine { margin: 0; display: flex; gap: 6px; align-items: center; }
.look-brokerage .quote-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.look-brokerage .price-lines { display: grid; gap: 2px; }
.look-brokerage .pay-plan { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--acc-soft); margin-bottom: 10px; }
.look-brokerage .client-view .cv-page { background: #f4f7f7; border-radius: var(--r); padding: 18px; display: grid; gap: 14px; }
.look-brokerage .cv-from { margin: 0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.look-brokerage .cv-intro { margin: 0; white-space: pre-wrap; }
.look-brokerage .cv-yacht { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: grid; gap: 6px; }
.look-brokerage .cv-yacht h3, .look-brokerage .cv-yacht p { margin: 0; }
.look-brokerage .cv-answers { display: flex; gap: 8px; margin-top: 4px; }
/* The itinerary (item 21): the days down the left, the blocks on the right, each day a drop target. */
.look-brokerage .cf-itin { padding: 18px; display: grid; gap: 12px; margin-top: 16px; }
.look-brokerage .it-editor { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.look-brokerage .it-days { display: grid; gap: 8px; }
.look-brokerage .it-day { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.look-brokerage .it-day.here { border-color: var(--acc); box-shadow: inset 3px 0 0 var(--acc); }
.look-brokerage .it-day.long { background: var(--warn-soft); }
.look-brokerage .it-date { display: grid; gap: 2px; align-content: start; }
.look-brokerage .it-main { display: grid; gap: 6px; }
.look-brokerage .it-main input, .look-brokerage .it-main textarea { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); }
.look-brokerage .it-leg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.look-brokerage .it-leg input[type=text] { flex: 1; min-width: 140px; width: auto; }
.look-brokerage .it-leg input[type=number] { width: 76px; }
.look-brokerage .it-tools { display: grid; gap: 6px; justify-items: start; align-content: start; }
.look-brokerage .it-shelf { position: sticky; top: 12px; display: grid; gap: 8px; padding: 12px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); max-height: 72vh; overflow: auto; }
.look-brokerage .it-blocks { display: grid; gap: 6px; }
.look-brokerage .it-block { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); cursor: grab; font: inherit; color: var(--ink); }
.look-brokerage .it-block:hover { border-color: var(--acc); }
.look-brokerage .it-block.own { border-color: var(--acc); box-shadow: inset 3px 0 0 var(--acc); }
.look-brokerage .it-block.far { opacity: .72; }
.look-brokerage .it-or { color: var(--muted); align-self: center; }
@media (max-width: 720px) {
  .look-brokerage .it-editor { grid-template-columns: minmax(0, 1fr); }
  .look-brokerage .it-day { grid-template-columns: minmax(0, 1fr); }
  .look-brokerage .it-shelf { position: static; max-height: none; }
}

/* News from the agents, the nudges, an offer on a charter, the sheet for this trip (TASK-234). */
.look-brokerage .move.news .actions, .look-brokerage .move.nudge .segs { grid-column: 4; justify-self: end; display: flex; gap: 6px; }
.look-brokerage .news-quiet { margin-top: 8px; }
.look-brokerage .cf-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--acc-soft); margin-bottom: 8px; }
.look-brokerage .cf-offer .btn { margin-left: auto; }
.look-brokerage .trip-sheet { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); margin: 10px 0; }
.look-brokerage .trip-sheet .plan { margin: 0; }
.look-brokerage .trip-sheet-form { display: grid; gap: 10px; }
.look-brokerage .trip-sheet-form input, .look-brokerage .trip-sheet-form textarea { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); }
.look-brokerage .trip-sheet-said { display: grid; gap: 6px; }
@media (max-width: 720px) { .look-brokerage .move.news .actions, .look-brokerage .move.nudge .segs { grid-column: 1 / -1; justify-self: start; } }

/* Your look in Settings and their page for the charter (TASK-235). */
.look-brokerage .look-form { display: grid; gap: 10px; }
.look-brokerage .look-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.look-brokerage .look-colour { display: flex; gap: 8px; align-items: center; }
.look-brokerage .look-colour input[type=color] { width: 44px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: none; }
.look-brokerage .guest-pack { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); margin: 10px 0; }
.look-brokerage .guest-pack textarea { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); }
.look-brokerage .guest-pack .link-box { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--acc-soft); }
.look-brokerage .pack-back .plan { margin: 4px 0 0; }

/* The team in place, Numbers, the CA lane, the client check, cancellations (TASK-236). */
.look-brokerage .owner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; color: var(--muted); }
.look-brokerage .owner-row select { font: inherit; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); }
.look-brokerage .crm-scope { margin-left: auto; }
.look-brokerage .crm-ca header b { color: var(--acc-text); }
.look-brokerage .num-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.look-brokerage .num-table th, .look-brokerage .num-table td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); }
.look-brokerage .num-table th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.look-brokerage .num-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.look-brokerage .month-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.look-brokerage .client-check { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); margin-bottom: 10px; }
.look-brokerage .check-form, .look-brokerage .cancel-form, .look-brokerage .firm-form { display: grid; gap: 10px; }
.look-brokerage .check-form .row, .look-brokerage .cancel-form .row, .look-brokerage .firm-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.look-brokerage .cf-cancelled { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r); background: var(--risk-soft); color: var(--risk-text); margin-bottom: 10px; }
.look-brokerage .cf-quiet { background: var(--warn-soft); color: var(--warn-text); }
.look-brokerage .cf-quiet .actions { flex-basis: 100%; display: flex; gap: 8px; }
.look-brokerage .cancel-fold { margin-top: 10px; }
.look-brokerage .move.colleague .avatar { width: 36px; height: 36px; }
.look-brokerage .br-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.look-brokerage .br-acts input { width: 120px; font: inherit; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.look-brokerage .mail-status .bank-flag { width: 100%; margin-bottom: 8px; }
.look-brokerage .chips { display: inline-flex; gap: 6px; }

/* WhatsApp and SMS, and the past brought in (TASK-237). */
.look-brokerage .channel-form, .look-brokerage .deep-import { display: grid; gap: 10px; }
.look-brokerage .channel-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.look-brokerage .channel-fold { grid-column: 1 / -1; margin-top: 6px; }
.look-brokerage .deep-import .actions { align-items: center; }
.look-brokerage .deep-import select { font: inherit; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
/* Several actions on one alert (TASK-239): a note, a gift, a reminder. */
.look-brokerage .cl-alert .cl-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 720px) { .look-brokerage .cl-alert .cl-acts { grid-column: 1 / -1; justify-content: flex-start; } }
.look-brokerage .why-lost { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; }
.look-brokerage .file-under { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.look-brokerage .file-under select { max-width: 100%; }
.look-brokerage .not-inquiry { border: 1px solid var(--warn-line); background: var(--warn-soft); display: grid; gap: 10px; }
.look-brokerage .not-inquiry p { margin: 0; color: var(--warn-text); }
.look-brokerage .tell-mic { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.look-brokerage .mic-btn.on { background: var(--accent-soft, #e3f3f1); border-color: var(--accent, #0e7a70); }

/* Fields and labels read as the app, not as code (TASK-378; Jordon, 10 Oct: "the old font and black box ... it makes it
 * look code/engineer heavy"): labels in plain sentence case, the client's own words as a quote, one clear next step. */
.look-brokerage .label { font: 500 13px/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted); }
.look-brokerage .field textarea { font-size: 15px; line-height: 1.5; resize: vertical; box-sizing: border-box; }
.look-brokerage .field input:focus, .look-brokerage .field textarea:focus, .look-brokerage .field select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.look-brokerage .req-said { margin: 2px 0 4px; padding: 2px 0 2px 12px; border-left: 3px solid var(--acc-line); font-size: 15px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.look-brokerage .req-said-who { font-size: 13px; color: var(--muted); }
.look-brokerage .req-fields { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 12px; }
@media (max-width: 700px) { .look-brokerage .req-fields { grid-template-columns: 1fr; } }
.look-brokerage .req-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.look-brokerage .req-next .meta { font-size: 13px; }

/* Numbers you read at a glance (TASK-378; Jordon: "it looks very boring. Hard to read it so plain"): the headline figures
 * first, then bars, each currency on its own. */
.look-brokerage .num-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 1180px) { .look-brokerage .num-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.look-brokerage .num-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); }
.look-brokerage .num-tile .k { display: block; font-size: 13px; color: var(--muted); }
.look-brokerage .num-tile b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.look-brokerage .num-tile .sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.look-brokerage .num-tile .sub.good { color: var(--acc-text); }
.look-brokerage .num-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.look-brokerage .num-bars { display: grid; gap: 10px; }
.look-brokerage .num-bar-row { display: grid; grid-template-columns: minmax(0, 40%) minmax(48px, 1fr) auto; align-items: center; gap: 12px; font-size: 14px; }
.look-brokerage .num-bar-label { line-height: 1.3; overflow-wrap: anywhere; }
.look-brokerage .num-bar-track { height: 14px; border-radius: 7px; background: var(--acc-soft); min-width: 6px; overflow: hidden; }
.look-brokerage .num-bar-fill { height: 100%; border-radius: 7px; background: var(--acc); }
.look-brokerage .num-bar-track.lost { background: #f6dfd6; }
.look-brokerage .num-bar-track.lost .num-bar-fill { background: #d9774f; }
.look-brokerage .num-bar-value { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; text-align: right; min-width: 52px; }
.look-brokerage .num-bar-value b { color: var(--ink); font-weight: 600; }
.look-brokerage .num-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.look-brokerage .num-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--acc); }
.look-brokerage .num-legend i.soft { background: var(--acc-soft); }
.look-brokerage .num-fast { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.look-brokerage .num-fast > div { background: var(--bg); border-radius: var(--r-sm); padding: 14px 16px; }
.look-brokerage .num-fast b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.look-brokerage .num-fast .k { font-size: 13px; color: var(--muted); }

/* An offer's "Fits …" chip sits apart from its title (TASK-382). */
.look-brokerage .move.news .move-text > b .chip { margin-left: 10px; vertical-align: 2px; font-weight: 500; }
/* The brief, changed on the charter's page (TASK-394). */
.look-brokerage .brief-edit { display: grid; gap: 12px; }
.look-brokerage .brief-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 14px; }

/* The welcome pages in CharterDesk's look (TASK-395; Jordon, 11 Oct: "look like the charterdesk app"): the drawn sea of
   My day on one side with its name on glass, the form on white on the other. */
body.look-brokerage.welcome { background: var(--bg); }
.look-brokerage .welcome-side { position: relative; overflow: hidden; color: #fff; padding: 22px; justify-content: flex-end;
  background: radial-gradient(120% 80% at 80% 10%, rgba(255,255,255,.35), transparent 55%), radial-gradient(60% 50% at 20% 90%, rgba(10,70,82,.45), transparent 70%),
    repeating-radial-gradient(circle at 30% 120%, rgba(255,255,255,.07) 0 2px, transparent 2px 14px), linear-gradient(155deg, #8fdde4 0%, #33a9b8 42%, #0f6b78 100%); }
.look-brokerage .welcome-side .brand { position: absolute; top: 26px; left: 30px; padding: 0; }
.look-brokerage .welcome-side .mark { display: none; }
.look-brokerage .welcome-side .brand-name { margin: 0; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 500; }
.look-brokerage .welcome-side .brand-name .brand-line { color: rgba(255,255,255,.8); margin-top: 2px; }
.look-brokerage .welcome-side .brand-word { display: block; color: #fff; font-size: 26px; font-weight: 700; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(5,40,48,.25); }
.look-brokerage .welcome-side .brand-word span { color: #dff6f8; }
.look-brokerage .welcome-pitch { margin: 0; background: rgba(255,255,255,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 22px; padding: 24px 26px; color: var(--ink); box-shadow: 0 20px 50px -24px rgba(5,40,48,.45); }
.look-brokerage .welcome-about { font-size: 22px; color: var(--ink); max-width: none; }
.look-brokerage .welcome-side { gap: 12px; }
.look-brokerage .welcome-foot { color: rgba(255,255,255,.92); font-size: 13px; margin: 0 8px; text-shadow: 0 1px 6px rgba(5,40,48,.35); }
.look-brokerage .welcome-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 34px 32px 30px; }
.look-brokerage.welcome .top h1 { font-size: 30px; }
.look-brokerage.welcome .top .sub { color: var(--muted); }
.look-brokerage.welcome .view .btn { border-radius: 14px; }
.look-brokerage.welcome .field input { border-radius: 12px; background: #fff; }
.look-brokerage.welcome a { color: var(--acc-text); }
.look-brokerage.welcome .view .btn.primary { color: #fff; }
@media (max-width: 820px) {
  .look-brokerage .welcome-side { min-height: 220px; padding: 16px; }
  .look-brokerage .welcome-side .brand { top: 18px; left: 20px; }
  .look-brokerage .welcome-pitch { padding: 16px 18px; border-radius: 18px; }
  .look-brokerage .welcome-about { font-size: 16px; }
  .look-brokerage .welcome-card { padding: 24px 20px; }
}

/* What a stage needs before the next (TASK-396): ticked items with what they said; the nice-to-haves lighter. */
.look-brokerage .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.look-brokerage .checklist + .checklist { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.look-brokerage .ck { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 7px 0; }
.look-brokerage .ck-mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; margin-top: 1px; }
.look-brokerage .ck.done .ck-mark { background: var(--acc); border-color: var(--acc); color: #fff; }
.look-brokerage .ck.done .ck-mark .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.look-brokerage .ck-text { display: grid; gap: 1px; min-width: 0; }
.look-brokerage .ck-text b { font-weight: 500; }
.look-brokerage .ck:not(.done):not(.nice) .ck-text .meta { color: var(--warn-text); }
.look-brokerage .ck.nice b { font-weight: 400; color: var(--muted); }
.look-brokerage .cf-check { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); display: grid; gap: 8px; }
/* A side card's heading wraps in its column rather than pushing the page sideways ("Another broker asking about your yacht?"). */
.look-brokerage .inq-side h2 { white-space: normal; text-wrap: balance; min-width: 0; }
/* Adding clients (TASK-399): the two ways in, then the form or the spreadsheet under them. */
.look-brokerage .client-adders { margin-bottom: 4px; }
.look-brokerage .add-client { display: grid; gap: 14px; }
.look-brokerage .add-client .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.look-brokerage .client-add:empty { display: none; }
/* The reply box (TASK-401): the draft goes in the box; a bar under it says what it is; each result closes with its X. */
.look-brokerage .reply-form textarea { min-height: 180px; line-height: 1.55; }
.look-brokerage .draft-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.look-brokerage .draft-bar .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.look-brokerage .show-draft-head { display: flex; align-items: center; gap: 10px; }
.look-brokerage .x-close { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; }
.look-brokerage .x-close:hover { background: var(--hover); color: var(--ink); }
.look-brokerage .draft-bar .actions .x-close { margin-left: 0; }
.look-brokerage .needed-box:empty { display: none; }
/* The client's details form (TASK-402): the button, then the message with its link to copy. */
.look-brokerage .details-form-card { margin-top: 10px; }
.look-brokerage .details-form-card textarea { width: 100%; font: inherit; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; box-sizing: border-box; }
.look-brokerage .details-form-card .x-close { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; }
/* The reply's subject apart from its body (TASK-403). */
.look-brokerage .reply-subject { display: grid; gap: 4px; }
.look-brokerage .reply-subject input { font: inherit; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 11px; background: #fff; color: var(--ink); }

/* CharterDesk's logo (TASK-404, TASK-409): the whole logo, POWERED BY KODO built in, across the sidebar; its mark when
   folded; on the sign-in pages at the top of the white card, never on the sea (navy and teal disappear there). */
.look-brokerage .brand-logo { display: block; width: 100%; max-width: 206px; height: auto; }
/* The fold button sits on the company's line under the logo, so the logo keeps the sidebar's width. */
@media (min-width: 721px) {
  .look-brokerage .app:not(.rail-collapsed) .rail-toggle { top: 62px; right: 12px; }
  .look-brokerage .app:not(.rail-collapsed) .brand-name { padding-right: 30px; }
}
.look-brokerage .brand-mark { display: none; height: 32px; width: auto; }
.look-brokerage .rail-collapsed .brand-logo { display: none; }
.look-brokerage .rail-collapsed .brand-mark { display: block; margin: 0 auto 6px; height: 26px; }
.look-brokerage .welcome-side .brand { display: none; }
.look-brokerage .welcome-card::before { content: ''; display: block; height: 64px; margin-bottom: 28px; background: url('charterdesk-logo.png') no-repeat left center / contain; }
@media (max-width: 820px) { .look-brokerage .welcome-card::before { height: 46px; margin-bottom: 20px; } }
@media (max-width: 720px) { .look-brokerage .rail .brand-logo { width: auto; height: 32px; max-width: none; } }
/* Her email signature (TASK-405): folded under the reply box, a card in Settings. */
.look-brokerage .sig-fold summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.look-brokerage .sig-editor { display: grid; gap: 10px; margin-top: 8px; }
.look-brokerage .sig-editor textarea { width: 100%; font: inherit; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; box-sizing: border-box; }
/* The reply's four buttons on one line (TASK-406), short names with their longer words as hover tips; wrapping on a phone. */
.look-brokerage .reply-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
.look-brokerage .reply-actions .btn { padding: 9px 14px; white-space: nowrap; }
@media (max-width: 640px) { .look-brokerage .reply-actions { flex-wrap: wrap; } }
/* The Inquiry step (TASK-411): read, check, reply, then choose; the checklist's open items in the card of what was found. */
.look-brokerage .inq-main { display: grid; gap: 22px; min-width: 0; align-content: start; }
.look-brokerage .inq-still { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0 0; border-top: 1px solid var(--line); margin-top: 6px; }
.look-brokerage .inq-still .chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 720px) { .look-brokerage .inq-still { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.look-brokerage .inq .reply-form { max-width: none; }
/* The email in the step reads as a letter: who, their address, when; not the Inbox's foldable header. */
.look-brokerage .inq-letter .mail-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 0; cursor: default; }
.look-brokerage .inq-letter .mail-head:hover { background: none; }
/* Another broker's request (TASK-411): rarely the case, so one quiet line, opened when it is. */
.look-brokerage .inq-side > .broker-fold { grid-column: 1 / -1; background: none; border: 0; box-shadow: none; padding: 0; }
.look-brokerage .broker-fold summary { color: var(--muted); font-size: 13.5px; cursor: pointer; }
.look-brokerage .broker-fold[open] { display: grid; gap: 10px; }
/* Closing a charter at any step (TASK-412): a menu on the page's top right, the reasons in her words. */
.look-brokerage .hello.with-action { position: relative; padding-right: 180px; }
.look-brokerage .hello-action { position: absolute; top: 0; right: 0; }
.look-brokerage .close-menu { position: relative; }
.look-brokerage .close-btn { display: inline-flex; align-items: center; gap: 6px; }
.look-brokerage .close-btn .caret { font-size: 11px; color: var(--muted); }
.look-brokerage .close-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 300px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 12px 32px -12px rgba(10,40,48,.28); padding: 14px; display: grid; gap: 10px; }
.look-brokerage .close-list[hidden] { display: none; }
.look-brokerage .close-list .meta { margin: 0; font-size: 13px; }
.look-brokerage .close-reasons { display: grid; gap: 2px; }
.look-brokerage .close-item { font: inherit; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 10px; color: var(--ink); cursor: pointer; }
.look-brokerage .close-item:hover { background: var(--hover); }
.look-brokerage .close-list input { font: inherit; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
@media (max-width: 720px) { .look-brokerage .hello.with-action { padding-right: 0; } .look-brokerage .hello-action { position: static; margin-top: 10px; } .look-brokerage .close-list { right: auto; left: 0; } }
/* The walk-through of every step (TASK-413): the contract's text folded on the charter; cancelling in the corner. */
.look-brokerage .contract-fold > summary { margin-bottom: 8px; }
.look-brokerage .hello-action > .cancel-fold { position: relative; }
.look-brokerage .hello-action > .cancel-fold > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--panel); border-radius: 12px; padding: 7px 12px; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; }
.look-brokerage .hello-action > .cancel-fold > summary::after { content: '▾'; font-size: 11px; color: var(--muted); }
.look-brokerage .hello-action > .cancel-fold > summary::-webkit-details-marker { display: none; }
.look-brokerage .hello-action > .cancel-fold[open] > :not(summary) { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(420px, 90vw); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 12px 32px -12px rgba(10,40,48,.28); padding: 14px; box-sizing: border-box; }
.look-brokerage .via-form { margin-left: 8px; font-size: 11.5px; vertical-align: middle; }
.look-brokerage .form-note { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
/* A payment recorded on its own row (TASK-414). */
.look-brokerage .pay-acts { display: grid; gap: 10px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.look-brokerage .pay-acts .actions { margin: 0; }
.look-brokerage .pay-form { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); }
.look-brokerage .pay-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.look-brokerage .pay-form input { font: inherit; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 10px; width: 100%; box-sizing: border-box; background: #fff; }
/* Getting ready (TASK-415): what must be ready before they sail. */
.look-brokerage .ready-list { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.look-brokerage .ready-list .card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* They're back (TASK-416): thank them and ask how it was, their verdict on the yacht, next season. */
.look-brokerage .back-card { display: grid; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.look-brokerage .back-card .card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.look-brokerage .back-line { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.look-brokerage .back-remind { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.look-brokerage .back-remind input { font: inherit; border: 1px solid var(--line-strong); border-radius: 10px; padding: 6px 9px; }
.look-brokerage .reply-own { margin: 0 0 4px; }
/* A request's own actions under its row (TASK-417). */
.look-brokerage .req-acts { display: grid; gap: 4px; padding: 0 0 12px 2px; border-bottom: 1px solid var(--line); }
.look-brokerage .req-acts .task { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }
.look-brokerage .req-acts .task > .head, .look-brokerage .req-acts .task > .meta { display: none; }
.look-brokerage .req-acts .actions { margin: 0; }
/* Set up your desk (TASK-422): the owner's first run, in the platform's one-at-a-time form. */
.look-brokerage .tf { max-width: 820px; }
.look-brokerage .tf-hero.sea { place-items: center start; color: #fff; }
.look-brokerage .setup-done { display: grid; gap: 10px; margin-top: 6px; }
.look-brokerage .setup-done .plan { margin: 0; }
/* Your team (TASK-423): a name and its link. */
.look-brokerage .team-invite { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.look-brokerage .team-invite input { font: inherit; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 11px; min-width: 220px; flex: 1 1 220px; }
.look-brokerage .team-made textarea { width: 100%; font: inherit; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; box-sizing: border-box; }

/* Set up from your mail (TASK-437) */
.look-brokerage .past-how { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.look-brokerage .past-bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; margin: 6px 0 10px; }
.look-brokerage .past-bar span { display: block; height: 100%; background: var(--acc); border-radius: 999px; transition: width .4s ease; }
.look-brokerage .past-sum { margin: 0 0 8px; }
.look-brokerage .past-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.look-brokerage .past-group > summary { cursor: pointer; padding: 4px 0 10px; list-style: none; display: flex; gap: 6px; align-items: baseline; }
.look-brokerage .past-group > summary::-webkit-details-marker { display: none; }
.look-brokerage .past-row { align-items: flex-start; }
.look-brokerage .past-row input[type=checkbox] { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--acc); flex: none; }
.look-brokerage .past-row.out .move-text { opacity: .45; text-decoration: line-through; }
.look-brokerage .past-row .move-text { min-width: 0; }
.look-brokerage .past-ev { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; margin-top: 2px; }
.look-brokerage .past-ev a { color: var(--acc); text-decoration: none; overflow-wrap: anywhere; }
.look-brokerage .past-ev a:hover { text-decoration: underline; }
.look-brokerage .past-folders { display: grid; gap: 6px; margin: 8px 0 12px; }
.look-brokerage .past-folder { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.look-brokerage .past-folder input { width: 18px; height: 18px; accent-color: var(--acc); flex: none; align-self: center; }
.look-brokerage .past-more { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 8px; }
.look-brokerage .past-more label { display: grid; gap: 4px; font-size: 13px; min-width: 0; }
.look-brokerage .past-more input[type=text] { min-width: min(320px, 100%); }
.look-brokerage .past-q, .look-brokerage .past-row { align-items: flex-start; flex-wrap: wrap; }
.look-brokerage .past-q .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.look-brokerage .past-confirm { padding: 4px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.look-brokerage .past-row.done .move-text b { opacity: .8; }
.look-brokerage .past-report { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 8px 0; }
.look-brokerage .past-report > div { display: grid; gap: 2px; }
.look-brokerage .past-bar.busy span { width: 30%; animation: past-slide 1.4s ease-in-out infinite; }
@keyframes past-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .look-brokerage .past-bar.busy span { animation: none; width: 100%; opacity: .35; } }

/* Past charters (TASK-438) */
.look-brokerage .past-years { display: grid; gap: 16px; }
.look-brokerage .past-kinds { margin: 12px 0 4px; flex-wrap: wrap; }
.look-brokerage .past-year .moves { display: grid; gap: 2px; }
.look-brokerage .past-deal { text-decoration: none; color: inherit; align-items: center; }
.look-brokerage .past-deal .move-text { min-width: 0; }
.look-brokerage .past-deal:hover b { text-decoration: underline; }
.look-brokerage .move.past-deal { display: flex; gap: 12px; justify-content: space-between; grid-template-columns: none; }
.look-brokerage .move.past-deal .move-text { flex: 1 1 auto; }
.look-brokerage .move.past-deal .chip { flex: none; }

/* Lead-flow watch (TASK-443) */
.look-brokerage .lead-watch { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.look-brokerage .lead-watch .move-text { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.look-brokerage .lead-watch.risk { border-left: 4px solid var(--risk-text); }
.look-brokerage .lead-watch.warn { border-left: 4px solid var(--warn-text); }

/* Special rates (TASK-444) */
.look-brokerage .rate-offer .move-text { display: grid; gap: 3px; }
.look-brokerage .rate-fits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.look-brokerage .rate-fits .chip { text-decoration: none; }
@media (max-width: 640px) { .look-brokerage .rate-offer { grid-template-columns: 40px minmax(0, 1fr); } .look-brokerage .rate-offer > .chip, .look-brokerage .rate-offer > .btn { grid-column: 2; justify-self: start; } }

/* The board by hand (TASK-445) */
.look-brokerage .crm-col.drop-here { outline: 2px dashed var(--acc); outline-offset: -4px; }
.look-brokerage .deal-card[draggable="true"] { cursor: grab; }

/* A row without its icon (TASK-447: JJ's "vertical skinny text"): its words take the icon's column too, never squeezed
   into 56px a word a line. */
.look-brokerage .move > .move-text:first-child { grid-column: 1 / 3; }

/* The calendar's own marks (TASK-451) */
.look-brokerage .cal-marks { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.look-brokerage .cal-mark { display: block; font-size: 12px; line-height: 1.3; padding: 2px 6px; border-radius: 6px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.look-brokerage .cal-mark.sea { background: var(--acc-soft); color: var(--acc-text, var(--acc)); }
.look-brokerage .cal-mark.offer { background: var(--warn-soft); color: var(--warn-text); }
.look-brokerage .mday .cal-mark { margin-top: 2px; }

/* Customize (TASK-452) */
.look-brokerage .cust-rows { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.look-brokerage .cust-row .label { display: block; margin-bottom: 4px; }
.look-brokerage .crm-customize { margin: 8px 0 0; text-align: right; }

/* Details added by hand (TASK-485): where each came from, what they said. */
.look-brokerage .details-added { display: grid; gap: 6px; margin: 8px 0; }
.look-brokerage .details-added .k { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.look-brokerage .detail-note { display: block; font-style: italic; }
.look-brokerage .detail-from { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The recommended team (TASK-491). */
.look-brokerage .team-offer { display: grid; gap: 10px; margin: 6px 0 12px; }
.look-brokerage .team-row { display: grid; gap: 2px; }
.look-brokerage .past-roles { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.look-brokerage .past-roles select { font-size: 12.5px; padding: 1px 4px; }
/* Read after the page shows (13 Oct: the brochures in her mail): no box of its own, so no gap while it is empty. */
.look-brokerage .after-page { display: contents; }
.look-brokerage .brochure-for { display: block; color: var(--acc-text, #0e5f6b); }
/* Which charters, as one dropdown (13 Oct). */
.look-brokerage .charters-bar .charter-filters { display: inline-flex; align-items: center; gap: 8px; }
.look-brokerage .charters-bar .charter-filters select { font: inherit; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
/* Her own mail program, from an email (13 Oct). */
.look-brokerage .in-mail { margin-top: 8px; }
.look-brokerage .frequent-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
/* The app checked your office (13 Oct). */
.look-brokerage .check-title { font-size: 14px; margin: 14px 0 6px; color: var(--muted); font-weight: 600; }
/* Settings in a few groups (13 Oct). */
.look-brokerage .settings-tabs { margin: 0 0 14px; flex-wrap: wrap; }
.look-brokerage .settings-pane { display: grid; gap: 14px; }
.look-brokerage .settings-pane[hidden] { display: none; }
.look-brokerage .settings-find { font: inherit; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); width: 100%; box-sizing: border-box; }
.look-brokerage .setting-more > summary { cursor: pointer; }
.look-brokerage .setting-more[hidden] { display: none; }

/* Set up from my mail, where it is offered (Jordon, 14 Oct: at the top once the email is connected, said so they know what
   it is and why it matters; a whole-screen explainer the first time; progress with the time left). */
.look-brokerage .past-hero { background: var(--panel); border: 1px solid var(--acc-line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 34px); display: grid; gap: 14px; margin-bottom: 18px; }
.look-brokerage .past-hero h2, .look-brokerage .past-intro h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.look-brokerage .past-hero .lede, .look-brokerage .past-intro .lede { font-size: clamp(16px, 1.6vw, 19px); color: #2b4750; max-width: 64ch; margin: 0; }
.look-brokerage .past-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.look-brokerage .past-point { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border-radius: var(--r); background: var(--acc-soft); }
.look-brokerage .past-point b { font-size: 16px; }
.look-brokerage .past-point p { margin: 4px 0 0; color: #2b4750; font-size: 14.5px; line-height: 1.45; }
.look-brokerage .btn.big { font-size: 17px; padding: 14px 22px; }
.look-brokerage .past-intro-back { position: fixed; inset: 0; z-index: 80; background: rgba(10,30,37,.55); display: grid; place-items: center; padding: 16px; }
.look-brokerage .past-intro { width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border-radius: var(--r-lg); box-shadow: 0 30px 80px -30px rgba(5,40,48,.55); padding: clamp(22px, 4vw, 44px); display: grid; gap: 18px; }
.look-brokerage .past-count { margin: 0; font-size: 17px; }
.look-brokerage .past-count b { font-size: 28px; letter-spacing: -.02em; }
/* A yacht's price, large on its photo (or on the drawn sea until it has one). */
.look-brokerage .hero-price { position: absolute; left: 20px; bottom: 18px; display: grid; gap: 2px; padding: 10px 16px; border-radius: var(--r); background: rgba(5,40,48,.55); color: #fff; backdrop-filter: blur(6px); }
.look-brokerage .hero-price .k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.look-brokerage .hero-price b { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.look-brokerage .yacht-hero { position: relative; }