[hidden]{display:none!important}
:root{--ink:#0E1A2B;--ink2:#182A42;--ink3:#25384F;--paper:#F2F3F5;--paper2:#E5E8ED;--white:#FAFBFC;--stone:#C6CCD6;
--graphite:#5C6879;--alert:#B3453F;--good:#2E7D5B;--brass:#A8873E;--info:#41618A;
--serif:"Source Serif 4",Georgia,serif;--sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper);font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:2px}
button.ghost{background:transparent;color:var(--ink);border-color:var(--stone)}
button.danger{background:transparent;color:var(--alert);border-color:var(--alert)}
input,select,textarea{font:inherit;width:100%;padding:8px 10px;border:1px solid var(--stone);border-radius:2px;background:var(--white);color:var(--ink)}
textarea{min-height:72px;resize:vertical}
label{display:block;font-size:12px;color:var(--graphite);margin-bottom:10px}
label input,label select,label textarea{margin-top:4px}
a{color:var(--info)}
.muted{color:var(--graphite)}.err{color:var(--alert)}
.login{min-height:100%;display:flex;align-items:center;justify-content:center;background:var(--ink);padding:20px}
.card{background:var(--white);padding:28px;border-radius:3px;width:100%;max-width:360px}
/* The seal is the mark; the name is set beside it, because the lettering inside
   a 40px circle cannot be read and is only there as texture. */
.mark{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.03em;
  display:flex;align-items:center;gap:10px}
.mark img{display:block;width:auto;max-width:100%;flex:none}
.mark .wm b{font-weight:400;color:var(--brass)}
.login .mark{justify-content:center;margin-bottom:6px}
.login .mark img{height:54px;width:54px}
aside .mark{padding:0 18px 14px}aside .mark img{height:40px;width:40px}
.shell{display:flex;min-height:100%}
/* The left menu. It was 210px of small grey words; now it is wider, each page
   carries a drawn mark, and the three group headings read as headings. */
aside{width:248px;flex:none;background:var(--ink);color:var(--paper);padding:18px 0 0;display:flex;flex-direction:column;
  border-right:1px solid var(--ink3);overflow-y:auto}
aside .mark{color:var(--paper);padding:0 18px 16px;font-size:18px}aside .mark .wm{color:var(--paper)}
aside .who{padding:0 18px 14px;font-size:11.5px;line-height:1.5;color:#9AA6B8;border-bottom:1px solid var(--ink3)}

aside a{display:flex;align-items:center;gap:11px;padding:9px 18px 9px 15px;color:#AEB9C9;text-decoration:none;
  border-left:3px solid transparent;font-size:13.5px;letter-spacing:.012em;min-height:38px}
aside a .ni{width:17px;height:17px;flex:none;opacity:.72;transition:opacity .15s}
aside a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
aside a:hover{color:#EAEEF4;background:rgba(255,255,255,.045)}
aside a:hover .ni{opacity:1}
aside a.on{color:#FFFFFF;background:var(--ink2);border-left-color:var(--brass);font-weight:500}
aside a.on .ni{opacity:1;color:var(--brass)}

/* CRM · AGENTS · TOOLS — a brass tick, the word at a size you can read,
   and the number of pages inside it */
aside button.sec{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:0;
  padding:16px 16px 7px;cursor:pointer;text-align:left}
aside .secbar{width:3px;height:13px;background:var(--brass);flex:none;border-radius:1px}
aside .sectxt{flex:1;font-size:12.5px;font-weight:600;letter-spacing:.16em;color:#E4E9F0;text-transform:uppercase}
aside .secn{font-size:10.5px;color:#6F7E94;letter-spacing:.06em;
  border:1px solid var(--ink3);border-radius:9px;padding:1px 7px;line-height:1.5}
aside button.sec:hover .sectxt{color:#FFFFFF}
aside button.sec:hover .secbar{background:var(--brass-lt,#C9AC72)}
aside .foot{margin-top:auto;padding:14px 18px;border-top:1px solid var(--ink3)}
main{flex:1;min-width:0;padding:24px 28px}
h1{font-family:var(--serif);font-weight:600;font-size:24px;margin:0}
h2{font-family:var(--serif);font-weight:600;font-size:18px;margin:24px 0 10px}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.bar h1{margin-right:auto}.bar input,.bar select{width:auto;min-width:150px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:16px 0}
.tile{background:var(--white);border:1px solid var(--stone);border-top:3px solid var(--ink);padding:12px 14px;border-radius:2px}
.tile b{display:block;font-family:var(--serif);font-size:26px}.tile span{font-size:11px;color:var(--graphite);letter-spacing:.04em}
.tile.alert{border-top-color:var(--alert)}.tile.good{border-top-color:var(--good)}.tile.brass{border-top-color:var(--brass)}
.tw{overflow-x:auto;background:var(--white);border:1px solid var(--stone);border-radius:2px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;font-weight:500;color:var(--graphite);padding:9px 10px;border-bottom:1px solid var(--stone);white-space:nowrap;background:var(--paper)}
td{padding:9px 10px;border-bottom:1px solid var(--paper2);vertical-align:top}
tr.click{cursor:pointer}tr.click:hover td{background:var(--paper)}
.pill{display:inline-block;font-size:11px;padding:1px 7px;border:1px solid var(--stone);border-radius:2px;white-space:nowrap}
.pill.hot{color:var(--alert);border-color:var(--alert)}.pill.warm{color:var(--brass);border-color:var(--brass)}.pill.ok{color:var(--good);border-color:var(--good)}
/* who a contact is to the firm, read at a glance: gold owns, blue brokers */
.rtag{display:inline-block;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;white-space:nowrap;font-weight:600;border:1px solid}
.rtag.own{color:#7A6228;border-color:rgba(168,135,62,.55);background:rgba(168,135,62,.14)}
.rtag.brk{color:#2F4A6E;border-color:rgba(65,97,138,.55);background:rgba(65,97,138,.13)}
.rtag + .rtag{margin-left:4px}
.person{display:inline-block;white-space:nowrap;line-height:1.6}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 16px}
.grid .wide{grid-column:1/-1}
.modal{position:fixed;inset:0;background:rgba(14,26,43,.5);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:24px 12px;z-index:10}
.modal .card{max-width:860px}
.modal .card h1{margin-bottom:14px}
.row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.note{background:var(--white);border-left:3px solid var(--brass);padding:10px 14px;margin:10px 0;font-size:13px}
.toast{z-index:40;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:2px;z-index:20}
.list-alert{background:var(--white);border:1px solid var(--stone);border-left:3px solid var(--alert);padding:10px 14px;margin-bottom:8px;border-radius:2px}
.list-alert.med{border-left-color:var(--brass)}
@media screen and (max-width:760px){
  .shell{flex-direction:column}
  aside{width:100%;flex-direction:row;flex-wrap:wrap;padding:8px;align-items:center}
  aside{width:100%;border-right:0}
  aside .who,aside .sec{display:none}aside .mark{padding:4px 8px;width:100%}
  aside a{padding:8px 10px;border-left:0;font-size:13px;min-height:40px}aside .foot{margin:0;padding:6px;border-top:0}
  main{padding:16px}
}

.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--stone);border:1px solid var(--stone)}
.cal-h{background:var(--paper);padding:6px 8px;font-size:11px;color:var(--graphite)}
.cal-d{background:var(--white);min-height:104px;padding:6px;cursor:pointer;min-width:0}
.cal-d:hover{background:#F7F8FA}
.cal-d.blank{background:var(--paper);cursor:default}
.cal-d.today{box-shadow:inset 0 0 0 2px var(--ink)}
.cal-n{font-size:12px;color:var(--graphite)}.cal-n .wd{display:none}
.ev{display:block;font-size:11px;line-height:1.35;padding:2px 6px;margin-top:3px;border-left:3px solid var(--stone);background:var(--paper);
  color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:1px}
.ev.ok{border-left-color:var(--good)}.ev.warm{border-left-color:var(--brass)}
.ev.hot{border-left-color:var(--alert);color:var(--graphite);text-decoration:line-through}
.ev.renew{border-left-color:var(--brass);background:#F6F0E3}.ev.fu{border-left-color:var(--info)}.ev.exp{border-left-color:var(--graphite)}
/* whose entry this is, read before the words: the status keeps the left edge,
   the agent gets a dot and a tint of their own colour */
.ev.byag{border-left-color:var(--ag,var(--stone));
  background:color-mix(in srgb,var(--ag,transparent) 9%,var(--paper))}
.ev .agdot{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:5px;vertical-align:1px;flex-shrink:0}
.ev.hot.byag{background:var(--paper)}

/* the people on this month's diary, and the filter at the same time */
.agbar{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 12px;align-items:center}
.agbar button{background:transparent;color:var(--ink);border:1px solid var(--stone);
  padding:4px 11px;font-size:12px;border-radius:14px;display:inline-flex;align-items:center;gap:2px}
.agbar button i{font-style:normal}
.agbar button i:last-child{color:var(--graphite);margin-left:4px}
.agbar button.on{border-color:var(--ag,var(--ink));box-shadow:inset 0 0 0 1px var(--ag,var(--ink))}
.agbar button.on i:last-child{color:var(--ink)}
.legend .ev{display:inline-block;margin:0 6px 0 0}
@media screen and (max-width:760px){
  .cal{display:block;background:none;border:0}
  .cal-h,.cal-d.blank,.cal-d.empty{display:none}
  .cal-d{min-height:0;margin-bottom:8px;border:1px solid var(--stone)}
  .cal-n .wd{display:inline}.ev{white-space:normal}
}

/* ---- forms / printable documents ---- */
.forms{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.fcard{background:var(--white);border:1px solid var(--stone);border-top:3px solid var(--ink);padding:14px;border-radius:2px}
.fcard b{display:block;margin-bottom:8px;font-family:var(--serif);font-size:15px}
#doc{position:fixed;inset:0;z-index:30;background:#D9DDE3;overflow:auto;padding:0 12px 40px}
.doc-bar{position:sticky;top:0;z-index:1;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--ink);color:var(--paper);padding:10px 14px;margin:0 -12px 18px}
.doc-bar .muted{color:#9AA6B8;margin-right:auto;font-size:12px}
.page{background:#fff;width:8.5in;max-width:100%;margin:0 auto;padding:.55in .6in;box-shadow:0 2px 14px rgba(0,0,0,.18);
  font-family:Arial,Helvetica,sans-serif;font-size:10.5pt;color:#000;line-height:1.4;outline:none;position:relative}
.page p{margin:6px 0}
/* the B monogram, ghosted behind the text. CSS rather than markup so it also
   reaches drafts that were saved before the logo existed. */
.page::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.045;
  background:url('mark.webp') no-repeat center 34%;background-size:auto 300px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.page>*{position:relative;z-index:1}
.page .lh{border-bottom:2px solid #0E1A2B;padding-bottom:8px;margin-bottom:14px}
/* .lh2 is the logo letterhead. Plain .lh stays a stacked block so drafts saved
   before the logo existed still render the way they were written. */
.page .lh2{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.page .lh2 .lh-sub{text-align:right}
.page .lh-id{display:flex;align-items:center;gap:10px}
.page .lh-logo{height:46px;width:46px;flex:none;display:block;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.page .lh-mark{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:15pt;color:#0E1A2B;letter-spacing:.02em;line-height:1.1;white-space:nowrap}
.page .lh-strap{font-size:6.5pt;color:#5C6879;letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.page .lh-sub{font-size:7.5pt;color:#5C6879;letter-spacing:.04em;line-height:1.45}
.page h2.t{font-size:14pt;color:#0E1A2B;margin:4px 0 2px;font-family:Arial,Helvetica,sans-serif}
.page .st{color:#5C6879;font-size:9pt;margin:0 0 8px}
.page h3.sec{background:#0E1A2B;color:#fff;font-size:8.5pt;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;margin:14px 0 6px;font-family:Arial,Helvetica,sans-serif}
/* table-layout:fixed is load-bearing: without it a long line in the right-hand
   column stretches the table past the paper and the text prints cut off. */
.page table{width:100%;border-collapse:collapse;margin:4px 0 6px;table-layout:fixed}
/* The CRM's own .grid is a CSS grid for the edit forms. The printable forms
   use <table class="grid"> for their label-and-value blocks, and the two
   collided: display:grid turned every one of those tables into a grid
   container, so the cells shrank to their contents and each block sat in the
   left third of the page with the rest blank. Restoring table display here
   fixes every form that uses one. */
.page table.grid{display:table}
.page table.grid > tbody{display:table-row-group}
.page table.grid tr{display:table-row}
.page table.grid th,.page table.grid td{display:table-cell}
.page td,.page th{overflow-wrap:break-word;word-break:normal;white-space:normal}
.page td,.page th{border:1px solid #9AA3B2;padding:5px 7px;vertical-align:top;font-size:9.5pt;text-align:left}
.page .grid th,.page .terms th{background:#F2F3F5;color:#0E1A2B;width:22%;font-weight:600}
.page .list thead th{background:#0E1A2B;color:#fff;font-weight:600;font-size:8.5pt}
.page .list td{height:22px}
.page .terms td.n{width:7%;text-align:center;white-space:nowrap}
.page .c{display:block;text-align:center}
.page .bul{margin:0;padding-left:16px}.page .bul li{margin-bottom:3px}
.page .subj{font-weight:700;margin:14px 0}
.page .ind{padding-left:40px;display:inline-block}
.page .note{font-size:8.5pt;color:#5C6879;font-style:italic;margin:2px 0 4px}
.page .sigs td{border:0;width:50%;padding:22px 24px 0 0}
.page .sigs .line{border-bottom:1px solid #000;height:34px;margin-bottom:4px}
.page small{color:#5C6879;font-size:8pt}
.ph{background:#FFF3B0;border-radius:2px;padding:0 2px}
.pb{page-break-before:always;break-before:page;height:0}
@media screen and (max-width:760px){.page{padding:18px}}
#printhead{display:none}

@media print{
  @page{size:letter;margin:12mm}
  /* the app's grey never belongs on paper */
  html,body{background:#fff!important}
  body.doc-open>*:not(#doc){display:none!important}

  /* Printing an ordinary CRM screen: drop the furniture, add the letterhead. */
  body:not(.doc-open) #nav,body:not(.doc-open) .mtop,body:not(.doc-open) .toast,
  body:not(.doc-open) #main button,body:not(.doc-open) #main select,
  body:not(.doc-open) #main input,body:not(.doc-open) #main .bar .ghost{display:none!important}
  body:not(.doc-open) #printhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
    border-bottom:2px solid #0E1A2B;padding-bottom:8px;margin-bottom:14px}
  body:not(.doc-open) #printhead .id{display:flex;align-items:center;gap:9px;
    font-family:Georgia,"Times New Roman",serif;font-size:13pt;color:#0E1A2B;letter-spacing:.02em}
  body:not(.doc-open) #printhead img{height:40px;width:40px;display:block;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body:not(.doc-open) #printhead .c{font-size:8pt;color:#5C6879;letter-spacing:.08em;text-transform:uppercase}
  body:not(.doc-open) .shell{display:block;position:relative}
  body:not(.doc-open) main{padding:0!important;margin:0!important}
  body:not(.doc-open) tr{break-inside:avoid;page-break-inside:avoid}
  body:not(.doc-open) thead{display:table-header-group}
  #doc{position:static;background:none;padding:0;overflow:visible}
  .doc-bar{display:none!important}
  .page{box-shadow:none;width:auto;padding:0;margin:0}
  .ph{background:none}
  .page h3.sec,.page .list thead th,.page .grid th,.page .terms th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .page tr{break-inside:avoid;page-break-inside:avoid}
  /* fixed, so the browser paints the watermark on every sheet, not just page one */
  .page::before{position:fixed;background-position:center center;background-size:auto 40%;opacity:.05}
}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--stone);border:1px solid var(--stone)}
.cal-h{background:var(--paper);padding:6px 8px;font-size:11px;color:var(--graphite)}
.cal-d{background:var(--white);min-height:104px;padding:6px;cursor:pointer;min-width:0}
.cal-d:hover{background:#F7F8FA}.cal-d.blank{background:var(--paper);cursor:default}
.cal-d.today{box-shadow:inset 0 0 0 2px var(--ink)}
.cal-n{font-size:12px;color:var(--graphite)}.cal-n .wd{display:none}
.ev{display:block;font-size:11px;line-height:1.35;padding:2px 6px;margin-top:3px;border-left:3px solid var(--stone);background:var(--paper);
  color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:1px}
.ev.ok{border-left-color:var(--good)}.ev.warm{border-left-color:var(--brass)}
.ev.hot{border-left-color:var(--alert);color:var(--graphite);text-decoration:line-through}
.ev.renew{border-left-color:var(--brass);background:#F6F0E3}.ev.fu{border-left-color:var(--info)}.ev.exp{border-left-color:var(--graphite)}
/* whose entry this is, read before the words: the status keeps the left edge,
   the agent gets a dot and a tint of their own colour */
.ev.byag{border-left-color:var(--ag,var(--stone));
  background:color-mix(in srgb,var(--ag,transparent) 9%,var(--paper))}
.ev .agdot{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:5px;vertical-align:1px;flex-shrink:0}
.ev.hot.byag{background:var(--paper)}

/* the people on this month's diary, and the filter at the same time */
.agbar{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 12px;align-items:center}
.agbar button{background:transparent;color:var(--ink);border:1px solid var(--stone);
  padding:4px 11px;font-size:12px;border-radius:14px;display:inline-flex;align-items:center;gap:2px}
.agbar button i{font-style:normal}
.agbar button i:last-child{color:var(--graphite);margin-left:4px}
.agbar button.on{border-color:var(--ag,var(--ink));box-shadow:inset 0 0 0 1px var(--ag,var(--ink))}
.agbar button.on i:last-child{color:var(--ink)}
.legend .ev{display:inline-block;margin:0 6px 0 0}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:8px 0 18px}
.ph{margin:0;background:var(--white);border:1px solid var(--stone);border-radius:2px;overflow:hidden}
.ph img{width:100%;height:150px;object-fit:cover;display:block}
.ph figcaption{font-size:11px;color:var(--graphite);padding:6px 8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ph figcaption button{padding:2px 8px;font-size:11px}
@media screen and (max-width:760px){.cal{display:block;background:none;border:0}.cal-h,.cal-d.blank,.cal-d.empty{display:none}
  .cal-d{min-height:0;margin-bottom:8px;border:1px solid var(--stone)}.cal-n .wd{display:inline}.ev{white-space:normal}}
button.linkish{background:none;border:0;padding:0;color:var(--graphite);text-decoration:underline;
  cursor:pointer;font:inherit;font-size:12.5px}
button.linkish:hover{color:var(--ink)}
.refhint{display:block;margin-top:3px;font-size:11px;letter-spacing:.04em;min-height:13px}
.refhint.ok{color:var(--graphite)}
.refhint.warn{color:var(--alert)}
.lockline{font-size:12.5px;color:var(--graphite);background:var(--paper);border-left:3px solid var(--brass);padding:8px 12px;margin:0 0 14px}
.privacy{background:var(--paper);border:1px solid var(--stone);border-left:3px solid var(--alert);padding:14px 16px;margin:18px 0}
.privacy .pv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:10px 0 6px;font-size:14px}
table.mini{width:100%;border-collapse:collapse;margin-top:8px}
table.mini th{text-align:left;font-size:11px;color:var(--graphite);font-weight:500;padding:4px 6px;border-bottom:1px solid var(--stone)}
table.mini td{padding:4px 6px;border-bottom:1px solid var(--paper2);font-size:13px}
table.mini select{padding:3px 6px;font-size:12px}
.ownerbox{background:var(--paper);border:1px solid var(--stone);border-left:3px solid var(--brass);padding:10px 14px;margin:10px 0;font-size:14px}
.ownerbox.empty{border-left-color:var(--alert);color:var(--graphite)}
.ownerbox div{margin:2px 0}
/* one line per person: the role is a control, not a label, because it is the
   thing most often wrong on an imported record */
.ownerrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0}
.ownerrow + .ownerrow{border-top:1px solid var(--paper2)}
.ownerrow select.pcrole{width:auto;min-width:150px;padding:4px 8px;font-size:12px}
.ownerrow .who{flex:1 1 220px}
.ownerrow a.tiny{white-space:nowrap}
.ownerrow button.tiny{padding:3px 9px;font-size:12px}
/* one match: the score, the reasoning, and what to do about it */
.matchrow{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--paper2)}
.matchrow .mscore{min-width:52px}
.matchrow .mscore .pill{font-size:13px;padding:3px 8px;font-weight:600}
.matchrow .mbody{flex:1 1 auto;min-width:0}
.matchrow .mdo{display:flex;gap:6px;flex-shrink:0}
.matchrow .mdo button{padding:3px 9px;font-size:12px}
.mwhy{margin:3px 0 1px;font-size:12px;line-height:1.8}
.mwhy span{display:inline-block;margin-right:10px}
.mwhy .yes{color:var(--good)}
.mwhy .no{color:var(--graphite)}

/* ---- buyers as cards ---- */
.heatbar{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 14px}
.heatbar button{background:transparent;color:var(--ink);border:1px solid var(--stone);
  padding:5px 12px;font-size:13px;border-radius:2px}
.heatbar button i{font-style:normal;color:var(--graphite);font-size:12px;margin-left:3px}
.heatbar button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.heatbar button.on i{color:var(--stone)}

.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
.bcardx{background:var(--white);border:1px solid var(--stone);border-left:3px solid var(--stone);
  border-radius:2px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:9px;min-width:0}
.bcardx:hover{border-color:var(--graphite)}
.bcardx:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
/* the left edge carries the temperature, so a column of cards reads at a glance */
.bcardx.hot{border-left-color:var(--alert)}
.bcardx.warm{border-left-color:var(--brass)}
.bcardx.cold{border-left-color:var(--stone)}

.bhead{display:flex;align-items:center;gap:9px;min-width:0}
.bhead .av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;color:var(--paper);font-size:12px;font-weight:700}
.bname{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.bname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bname .tiny{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heat{font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  padding:2px 8px;border-radius:2px;border:1px solid;flex-shrink:0;cursor:help}
.heat.hot{color:#8E3832;border-color:rgba(179,69,63,.5);background:rgba(179,69,63,.11)}
.heat.warm{color:#7A6228;border-color:rgba(168,135,62,.5);background:rgba(168,135,62,.13)}
.heat.cold{color:var(--graphite);border-color:var(--stone);background:var(--paper)}

.bmoney{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bmoney b{font-family:var(--serif,inherit);font-size:19px}
.bmoney .pill{margin-left:auto}
.bplaces{display:flex;gap:5px;flex-wrap:wrap;min-height:22px}
.chip{display:inline-block;font-size:11px;padding:2px 9px;border:1px solid var(--stone);
  border-radius:11px;color:var(--graphite);background:var(--paper)}
.bfoot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  border-top:1px solid var(--paper2);padding-top:8px;margin-top:auto}
.bmatch{font-weight:700;font-size:15px;white-space:nowrap}
.bmatch.ok{color:var(--good)}
.bmatch.warm{color:var(--brass)}
.bmatch .tiny{font-weight:400}
.grid-view table{font-size:13.5px}
.grid-view thead th{position:sticky;top:0;z-index:1}
.grid-view tbody tr:nth-child(even) td{background:#FBFCFD}
.grid-view td{white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
details.cols{position:relative;display:inline-block}
details.cols summary{list-style:none;cursor:pointer;border:1px solid var(--stone);padding:8px 14px;border-radius:2px;background:transparent;font-size:14px}
details.cols summary::-webkit-details-marker{display:none}
.colmenu{position:absolute;z-index:5;top:110%;left:0;background:var(--white);border:1px solid var(--stone);padding:10px 12px;
  border-radius:2px;box-shadow:0 6px 18px rgba(14,26,43,.12);min-width:220px;max-height:340px;overflow:auto}
.colmenu label{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink);margin-bottom:6px}
.colmenu input{width:auto}
.viewsw{display:inline-flex;border:1px solid var(--stone);border-radius:2px;overflow:hidden}
.viewsw button{border:0;background:transparent;color:var(--graphite);padding:8px 14px;font-size:13.5px}
.viewsw button.on{background:var(--ink);color:var(--paper)}
.board{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.bcol{flex:0 0 260px;background:var(--paper);border:1px solid var(--stone);border-radius:2px;padding:10px;max-height:70vh;overflow-y:auto}
.bhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;position:sticky;top:0;background:var(--paper);padding-bottom:6px}
.bcard{background:var(--white);border:1px solid var(--stone);border-left:3px solid var(--ink);border-radius:2px;padding:9px 11px;margin-bottom:8px;cursor:pointer;font-size:13.5px}
.bcard:hover{border-left-color:var(--brass)}
.bcard .muted{font-size:12px}
.brow{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
button.mv{padding:1px 8px;font-size:13px;background:transparent;color:var(--ink);border-color:var(--stone)}
.onboard{background:var(--white);border:1px solid var(--stone);border-top:3px solid var(--brass);padding:14px 16px;margin:14px 0;border-radius:2px}
.obrow{display:flex;gap:10px;align-items:center;margin-top:8px;font-size:14px}
.obrow a{color:var(--ink)}
.navgrp{margin-top:6px}
.navgrp + .navgrp{border-top:1px solid rgba(255,255,255,.055)}
.obgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px}
.obcard{display:block;text-decoration:none;color:var(--ink);background:var(--white);border:1px solid var(--stone);
  border-top:3px solid var(--ink);padding:14px;border-radius:2px}
.obcard:hover{border-top-color:var(--brass)}
.obbar{height:7px;background:var(--paper2);margin:10px 0 6px;border-radius:2px;overflow:hidden}
.obbar span{display:block;height:100%;background:var(--good)}
.obbar.wide{max-width:420px}
.obrow{display:flex;gap:10px;align-items:center;margin:6px 0;font-size:14px}
.obrow .muted{margin-left:auto;font-size:12px}
.reading{max-width:70ch;font-size:15.5px;line-height:1.65}
.reading h2{font-size:22px;margin:26px 0 10px}
.reading h3{font-size:17px;margin:20px 0 8px;font-family:var(--sans);font-weight:600}
.reading h4{font-size:15px;margin:16px 0 6px;font-family:var(--sans);font-weight:600;color:var(--graphite)}
.reading p{margin:10px 0}
.reading .bul{padding-left:20px;margin:10px 0}
.reading .bul li{margin-bottom:6px}
.reading table{font-size:14px}
aside button.sec{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;
  border:0;padding:15px 18px 5px;font-size:10px;letter-spacing:.12em;color:#6F7E94;cursor:pointer;text-align:left}
aside button.sec:hover{color:#C9D2DE}
.navgrp.folded .grplinks{display:none}
.chev{font-size:9px;color:#6F7E94;flex:none}
.navgrp.folded .chev,.navgrp.folded .secn{color:var(--brass)}

/* ================================================================ on a phone */
.mtop { display: none }

@media screen and (max-width: 820px) {
  :root { --pad: 14px }
  body { display: block }

  .mtop {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 60;
    background: var(--ink); color: var(--paper);
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  }
  .mtop button { background: none; border: 0; color: var(--paper); font-size: 21px; padding: 2px 6px; line-height: 1 }
  .mmark { font-family: var(--serif); font-size: 17px; letter-spacing: .03em; display: flex; align-items: center; gap: 9px }
  .mmark img { height: 22px; width: auto; display: block }
  .mmark b { font-weight: 400; color: var(--brass) }

  aside {
    position: fixed; inset: 0 34% 0 0; z-index: 70; overflow-y: auto;
    transform: translateX(-102%); transition: transform .22s ease; width: auto;
  }
  body.navopen aside { transform: none; box-shadow: 0 0 0 100vmax rgba(11,21,36,.45) }
  aside .mark, aside .who { display: none }
  aside a { padding: 13px 20px; font-size: 15px }
  aside .foot { position: static; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) }

  main { padding: 16px 14px calc(40px + env(safe-area-inset-bottom, 0px)); margin-left: 0 }
  h1 { font-size: 25px } h2 { font-size: 19px }

  /* every table scrolls sideways inside its own frame, never the page */
  .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--stone); border-radius: 2px }
  .tw table { min-width: 620px; font-size: 13px }
  th, td { padding: 9px 10px; white-space: nowrap }

  /* controls stack instead of crowding */
  .bar { flex-wrap: wrap; gap: 8px }
  .bar h1 { width: 100%; margin-bottom: 4px }
  .row { flex-wrap: wrap; gap: 8px }
  .row button, .bar button { flex: 1 1 auto; min-height: 44px; font-size: 14px }
  .grid { grid-template-columns: 1fr !important; gap: 12px }
  .grid .wide { grid-column: auto }
  input, select, textarea { font-size: 16px; min-height: 44px }   /* 16px stops iOS zooming in */
  label { font-size: 12px }

  .tiles { grid-template-columns: 1fr 1fr; gap: 10px }
  .tile b { font-size: 26px }
  .card, .note, .privacy { padding: 14px }
  .modal { inset: 0; border-radius: 0; max-height: 100%; width: 100% }
  .modal .inner { padding: 16px 14px calc(24px + env(safe-area-inset-bottom, 0px)) }

  .board { gap: 10px }
  .bcol { flex: 0 0 82vw; max-height: none }
  .obgrid { grid-template-columns: 1fr }
  .photos { grid-template-columns: repeat(2, 1fr) }
  .viewsw button { padding: 9px 14px }
  details.cols .colmenu { position: fixed; left: 14px; right: 14px; top: auto; min-width: 0 }
  #doc { padding: 12px }
  .docwrap { padding: 16px 14px }
}

@media screen and (max-width: 420px) {
  .tiles { grid-template-columns: 1fr }
  .bcol { flex: 0 0 88vw }
}
details.more{margin-top:16px;border-top:1px solid var(--stone);padding-top:12px}
details.more summary{cursor:pointer;font-size:13px;color:var(--graphite);letter-spacing:.02em;list-style:none;
  padding:6px 0;display:flex;align-items:center;gap:8px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"▸";font-size:10px;color:var(--brass)}
details.more[open] summary::before{content:"▾"}
details.more summary:hover{color:var(--ink)}
details.more .grid{margin-top:10px}
.mapfig{margin:20px 0;border:1px solid var(--stone);background:var(--white);padding:10px}
.mapfig img{width:100%;display:block}
.mapfig figcaption{font-size:12px;color:var(--graphite);padding:8px 2px 2px}

/* ---------------------------------------------------------------- a little warmth, without noise */
.tiles .tile{position:relative;overflow:hidden;transition:border-color .2s,transform .12s}
.tiles .tile::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stone)}
.tiles .tile.alert::after{background:var(--bad)}
.tiles .tile.brass::after{background:var(--brass)}
.tiles .tile:hover{transform:translateY(-1px);border-color:var(--ink)}
.tiles .tile b{font-variant-numeric:tabular-nums}

thead th{background:linear-gradient(180deg,var(--white),var(--paper))}
tbody tr.click:hover td{background:#F2F5F9}
tbody tr.click{transition:background .12s}

.pill{border-radius:2px;font-variant-numeric:tabular-nums}
.pill.ok{background:rgba(46,125,91,.10)}
.pill.warm{background:rgba(168,137,76,.12)}

.bar h1{position:relative;padding-left:14px}
.bar h1::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:3px;background:var(--brass)}

.card{box-shadow:0 1px 2px rgba(14,26,43,.04)}
.privacy{background:linear-gradient(180deg,rgba(176,58,46,.05),transparent)}
.list-alert{border-left-width:3px;transition:background .12s}
.list-alert:hover{background:#F2F5F9}
#nav a{transition:color .15s,border-color .15s}
#nav a.on{border-left:3px solid var(--brass);padding-left:15px}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.ph{margin:0;background:var(--white);border:1px solid var(--stone);position:relative;
  display:flex;flex-direction:column;min-width:0}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--paper2)}
.ph.iscover{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.ph .covertag{position:absolute;top:7px;left:7px;background:var(--brass);color:#fff;
  font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  padding:2px 7px;border-radius:2px}
.ph figcaption{font-size:11px;color:var(--graphite);padding:8px;display:flex;
  flex-direction:column;gap:6px;align-items:stretch;min-width:0}
.ph .roomsel{width:100%;padding:4px 7px;font-size:12px;color:var(--ink)}
.ph .roomsel:invalid,.ph .roomsel option[value=""]{color:var(--graphite)}
.ph .roomlbl{font-size:12px;color:var(--ink);font-weight:600}
.ph .phmeta{font-size:10.5px}
.ph .phdo{display:flex;gap:5px;flex-wrap:wrap}
.ph figcaption button{padding:2px 8px;font-size:10.5px}
button.pk{padding:3px 11px;font-size:13px;background:transparent;color:var(--ink);border-color:var(--stone);line-height:1.2}
button.pk.on{background:var(--good);color:#fff;border-color:var(--good)}
.packbar{position:fixed;right:22px;bottom:22px;z-index:70;background:var(--ink);box-shadow:0 10px 26px rgba(14,26,43,.26)}
.packbar a{display:block;padding:13px 22px;color:#fff;text-decoration:none;font-size:13.5px;letter-spacing:.02em}
.packbar a:hover{background:var(--brass)}
.packrow{display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:center;background:var(--white);
  border:1px solid var(--stone);padding:12px;margin-bottom:10px}
.pkshot{aspect-ratio:4/3;background:var(--paper2) center/cover no-repeat;display:flex;align-items:center;
  justify-content:center;color:var(--graphite);font-size:11px}
.pkbody b{font-size:17px}
.pkacts{display:flex;gap:8px;flex-wrap:wrap}
@media screen and (max-width:720px){.packrow{grid-template-columns:1fr}.packbar{right:12px;bottom:12px}}
.jpath{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 12px}
.jstep{font:500 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:8px 13px;
  background:var(--paper2);color:var(--graphite);border:1px solid var(--stone)}
.jstep.done{background:rgba(46,125,91,.12);color:#2E7D5B;border-color:rgba(46,125,91,.3)}
.jstep.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.jstep.off{opacity:.45}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;margin:14px 0 26px}
.chartbox{background:var(--white);border:1px solid var(--stone);padding:14px 16px 10px}
.chartbox h3{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--graphite);letter-spacing:.04em}
svg.chart{width:100%;height:auto;display:block;overflow:visible}
.donutwrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.donutwrap svg.donut{width:170px;flex:0 0 170px}
.legend{font-size:12px;line-height:1.9;flex:1;min-width:150px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:1px;margin-right:7px}
@media screen and (max-width:720px){.donutwrap svg.donut{flex:0 0 140px;width:140px}}
button.jstep{cursor:pointer;font-family:var(--sans)}
button.jstep:hover{border-color:var(--ink);color:var(--ink)}
button.jstep.on:hover{background:var(--brass);border-color:var(--brass);color:#fff}
a.tile{text-decoration:none;color:inherit;display:block;cursor:pointer}
a.tile:hover{border-color:var(--ink);transform:translateY(-1px)}
a.tile:hover b{color:var(--brass)}
.thumb{display:inline-block;width:62px;height:46px;border-radius:2px;border:1px solid var(--stone);
  background:#14243A center/cover no-repeat;vertical-align:middle}
.thumb.none{background:repeating-linear-gradient(135deg,var(--paper2) 0 6px,transparent 6px 12px)}
td .thumb{margin:1px 0}
@media screen and (max-width:720px){.thumb{width:48px;height:36px}}

/* The wording editor. A {{marker}} is a real part of the text, so it is left
   as plain characters — but shown in brass so a person editing never mistakes
   one for a word to rewrite. */
.chk{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--graphite);white-space:nowrap}
.chk input{margin:0;width:auto;flex:none;min-width:0}
.page.tpl{outline:2px dashed rgba(168,135,62,.35);outline-offset:6px}
.doc-bar code,.note code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  color:var(--brass);background:rgba(168,135,62,.09);padding:1px 5px;border-radius:2px;white-space:nowrap}

/* Whose client is this, and which month did it arrive?
   The agent is a colour — a bar down the left of the row and a chip on the
   agent's own cell. The month is a line across the table, not a second colour:
   two colour systems competing and the eye reads neither. */
/* the bar goes on the first cell, not the row: a box-shadow on a <tr> is
   drawn or dropped depending on the browser, and half the rows lost it */
.agrow td:first-child{box-shadow:inset 3px 0 0 var(--ag)}
.agtag{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.04em;
  color:var(--ink);white-space:nowrap}
.agtag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ag);flex:none}
.aglegend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px;padding:9px 12px;
  background:var(--paper);border:1px solid var(--stone);border-radius:2px}
tr.mrow td{background:var(--ink);color:#fff;padding:6px 10px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;position:sticky;left:0}
tr.mrow td span{font-weight:500}
tr.mrow td i{font-style:normal;color:var(--brass-lt);margin-left:12px}
tr.mrow td i::before{content:"\00b7";margin-right:12px;color:rgba(255,255,255,.35)}
tr.mrow:hover td{background:var(--ink)}
@media print{.aglegend{display:none}.agrow td:first-child{box-shadow:none}
  tr.mrow td{background:#fff!important;color:#0E1A2B;border-bottom:1px solid #0E1A2B}}

/* The live-listing warning. It names what is in the way and offers the two
   things anyone wants to do about it, so nobody has to go hunting for it. */
.livelist{margin:10px 0 8px}
.liverow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:7px 0;border-top:1px solid var(--stone);font-size:12.5px}
.liverow:first-child{border-top:0}
.liverow.ok{opacity:.55}
.liverow button{padding:2px 9px;font-size:11px;margin-left:6px}

/* The commission waterfall. One fee, four stages, and the payout list under
   it. The money column is right-aligned and tabular so the figures line up
   down the page — a column of pesos that does not line up is hard to check. */
table.fall{width:100%;border-collapse:collapse;font-size:12.5px;margin:0}
table.fall td{padding:4px 0;border:0}
table.fall td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.fall tr.out td{color:var(--err,#B03A2E)}
table.fall tr.sub td{border-top:1px solid var(--stone)}
table.fall tr.keep td{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  background:var(--paper);color:var(--ink)}
.paylines{margin-top:9px;padding-top:8px;border-top:1px dashed var(--stone);
  font-size:12.5px;line-height:1.8}

/* A payout row. The name, what they do, their share of the pool, and who takes
   whatever is left — on one line, because the split is read across. */
.payees .payrow{display:grid;gap:6px;align-items:center;margin-bottom:6px;
  grid-template-columns:minmax(120px,1.6fr) minmax(90px,1fr) 78px auto minmax(80px,auto) 30px}
.payees .payrow input[type=text],.payees .payrow input[type=number],.payees .payrow input:not([type]){
  margin:0;padding:6px 8px;font-size:12.5px}
.payees .pay-share{text-align:right}
.payees .pay-rem{display:flex;align-items:center;gap:5px;margin:0;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--graphite);white-space:nowrap}
.payees .pay-rem input{margin:0;width:auto}
.payees .pay-amt{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap}
.payees .pay-del{padding:2px 8px;line-height:1.4;font-size:14px;color:var(--graphite)}
.payees .pay-del:hover{color:var(--err,#B03A2E)}
button.tiny{padding:3px 9px;font-size:11px}
@media(max-width:620px){
  .payees .payrow{grid-template-columns:1fr 1fr;grid-template-areas:
    "name name" "role share" "rem amt" "del del"}
  .payees .pay-name{grid-area:name}.payees .pay-role{grid-area:role}
  .payees .pay-share{grid-area:share}.payees .pay-rem{grid-area:rem}
  .payees .pay-amt{grid-area:amt;text-align:left}.payees .pay-del{grid-area:del;justify-self:start}
}
/* The closing line of the split: it must read as a total, not another share. */
table.fall tr.tot td{border-top:2px solid var(--ink);padding-top:6px}

/* The computation sheet: the inputs on the left, the result beside them, so a
   percentage and the peso it produces are visible at the same time. */
.calcwrap{display:grid;gap:24px;grid-template-columns:minmax(300px,1fr) minmax(260px,.85fr);align-items:start}
.calcout{background:var(--paper);border:1px solid var(--stone);border-radius:2px;padding:16px 18px;
  position:sticky;top:16px}
table.calctable{width:100%;border-collapse:collapse;font-size:13px}
table.calctable td{padding:5px 0;border:0;vertical-align:baseline}
table.calctable td:nth-child(2){text-align:right;width:68px;font-variant-numeric:tabular-nums;color:var(--graphite)}
table.calctable td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;width:110px}
table.calctable tr.out td{color:var(--err,#B03A2E)}
table.calctable tr.sub td{border-top:1px solid var(--stone);padding-top:7px}
table.calctable tr.tot td{border-top:2px solid var(--ink);padding-top:7px}
.calcrow{display:grid;gap:6px;align-items:center;margin-bottom:6px;
  grid-template-columns:minmax(110px,1.5fr) minmax(104px,1fr) 72px auto 30px}
.calcrow input,.calcrow select{margin:0;padding:6px 8px;font-size:12.5px}
.calcrow .cl-share{text-align:right}
.calcrow .cl-rest{display:flex;align-items:center;gap:5px;margin:0;font-size:11px;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.06em;color:var(--graphite)}
.calcrow .cl-rest input{margin:0;width:auto}
.calcrow .cl-del{padding:2px 8px;font-size:14px;line-height:1.4;color:var(--graphite)}
.calcrow .cl-del:hover{color:var(--err,#B03A2E)}
@media(max-width:900px){.calcwrap{grid-template-columns:1fr}.calcout{position:static}}
@media(max-width:620px){
  .calcrow{grid-template-columns:1fr 1fr;grid-template-areas:"name name" "role share" "rest del"}
  .calcrow .cl-name{grid-area:name}.calcrow .cl-role{grid-area:role}
  .calcrow .cl-share{grid-area:share}.calcrow .cl-rest{grid-area:rest}
  .calcrow .cl-del{grid-area:del;justify-self:end}
}
/* On paper only the result matters, and it should fill the page. */
@media print{
  .calcform,#cl_add,#cl_presets,.bar button{display:none!important}
  .calcwrap{display:block}
  .calcout{position:static;border:0;padding:0;background:#fff}
  table.calctable{font-size:13.5px}
}

/* ------------------------------------------------------------ the ribbon
   Laid out the way a word processor lays this out: controls gathered into
   named groups, the group's name under it, a hairline between groups. The
   arrangement is the familiar one; the colours are the CRM's own, so it reads
   as part of this application rather than an imitation of another one. */
.ribbon{position:sticky;top:44px;z-index:3;display:flex;align-items:stretch;gap:0;
  flex-wrap:wrap;background:linear-gradient(#FBFCFD,#F2F4F7);
  border-bottom:1px solid #D4DAE2;padding:5px 8px 0;margin:0 -12px}
.rb-g{display:flex;flex-direction:column;justify-content:space-between;
  padding:0 8px;border-right:1px solid #DFE4EB;flex:none}
.rb-g:last-child{border-right:0}
/* A group stacks its rows. They sat side by side at first, which made the
   Font group 600px wide and pushed Page off the right-hand edge entirely. */
.rb-gi{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.rb-gn{text-align:center;font-size:9.5px;letter-spacing:.06em;color:#7A8697;
  padding:3px 0 4px;text-transform:none}
.rb-row{display:flex;gap:2px;align-items:center;margin-bottom:2px;flex:none;white-space:nowrap}

/* a control */
.ribbon .rb{min-width:26px;height:24px;padding:0 5px;font-size:12px;line-height:1;
  background:transparent;color:var(--ink);border:1px solid transparent;border-radius:3px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:3px}
.ribbon .rb:hover{background:#E4EAF2;border-color:#C2CCDA}
.ribbon .rb:active{background:#D5DEEA}
.ribbon .rb.on{background:#D7E3F4;border-color:#9FB6D4}
.ribbon .rb sup,.ribbon .rb sub{font-size:8px}
.ribbon .rb-sel{height:24px;margin:0;padding:0 4px;font-size:11.5px;
  border:1px solid #C2CCDA;border-radius:3px;background:#fff;color:var(--ink)}
.ribbon .rb-sep{width:1px;height:18px;background:#DFE4EB;margin:0 3px}
.ribbon .rb-lb{font-size:10px;color:#7A8697;min-width:40px}

/* The four alignments, drawn rather than lettered: four bars whose ragged edge
   is on the side the text would be ragged. One glyph repeated four times told
   nobody anything. */
.ribbon .rb.al{flex-direction:column;justify-content:center;gap:2px;padding:0 6px}
.ribbon .rb.al i{display:block;height:1.5px;width:14px;background:currentColor;border-radius:1px}
.ribbon .rb.al.l i:nth-child(2),.ribbon .rb.al.l i:nth-child(4){width:8px;margin-right:auto}
.ribbon .rb.al.l i{margin-right:auto}
.ribbon .rb.al.r i{margin-left:auto}
.ribbon .rb.al.r i:nth-child(2),.ribbon .rb.al.r i:nth-child(4){width:8px}
.ribbon .rb.al.c i{margin:0 auto}
.ribbon .rb.al.c i:nth-child(2),.ribbon .rb.al.c i:nth-child(4){width:8px}
.ribbon .rb.al.j i{width:14px}

/* the two colour pickers: a letter with the chosen colour beneath it */
.ribbon .rb-col2{position:relative;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;width:26px;height:24px;margin:0;
  font-size:11px;font-weight:700;cursor:pointer;border:1px solid transparent;border-radius:3px}
.ribbon .rb-col2:hover{background:#E4EAF2;border-color:#C2CCDA}
.ribbon .rb-col2 span{line-height:1;pointer-events:none}
.ribbon .rb-col2::after{content:"";display:block;width:15px;height:3px;margin-top:1px;
  border-radius:1px;pointer-events:none}
.ribbon .rb-col2.fg::after{background:#B03A2E}
.ribbon .rb-col2.hl::after{background:#FFF2A8}
.ribbon .rb-col2 input{position:absolute;inset:0;opacity:0;width:100%;height:100%;
  padding:0;margin:0;border:0;cursor:pointer}

/* the styles gallery */
.rb-styles{display:flex;gap:3px}
.rb-sty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:60px;height:48px;padding:2px;cursor:pointer;background:#fff;
  border:1px solid #D4DAE2;border-radius:3px;font-size:8.5px;color:#5C6879;letter-spacing:.02em}
.rb-sty:hover{border-color:#7A93B8;box-shadow:0 0 0 2px #E4EAF2}
.rb-sty .pv{font-size:11.5px;color:var(--ink);font-family:Calibri,Carlito,Arial,sans-serif}
.rb-sty .pv.h{font-size:13px;font-weight:600;color:#2E5C8A}
.rb-sty .pv.h3{font-size:12px;font-weight:600;color:#4A7AA8}
.rb-sty .pv.q{font-style:italic;color:#7A8697}

/* the ruler, drawn from the same page setup the paper uses */
.rulerwrap{position:sticky;top:112px;z-index:2;background:var(--paper2);
  padding:5px 0 0;margin:0 -12px 10px;overflow:hidden;display:flex;justify-content:center}
.ruler{position:relative;height:17px;max-width:100%;background:#fff;
  border:1px solid #D4DAE2;border-radius:1px}
.ruler .rmz{position:absolute;top:0;bottom:0;left:0;background:#DDE3EB}
.ruler .rmz.r{left:auto;right:0}
.ruler .rm{position:absolute;top:50%;width:1px;height:3px;background:#A9B4C3;transform:translateY(-1px)}
.ruler .rm.h{height:6px;transform:translateY(-3px)}
.ruler .rm.w{height:0;background:none}
.ruler .rm i{position:absolute;left:50%;top:-6px;transform:translateX(-50%);
  font-style:normal;font-size:8.5px;color:#7A8697;line-height:1}

/* ------------------------------------------------------------ the page */
.page .pagebreak{border-top:1px dashed var(--brass);margin:14px 0;height:0}
.page blockquote{margin:6px 0 6px 24px;padding-left:12px;border-left:2px solid var(--stone)}
.page pre{font-family:"Courier New",Courier,monospace;white-space:pre-wrap;margin:6px 0}
.page ul,.page ol{margin:6px 0 6px 22px;padding:0}
.page li{margin:2px 0}
/* paragraph marks, the way a word processor shows them */
.page.marks p::after,.page.marks h2::after,.page.marks h3::after{content:"\00b6";color:#9FB6D4;margin-left:2px}
@media print{
  .ribbon,.rulerwrap{display:none!important}
  .page.marks p::after,.page.marks h2::after,.page.marks h3::after{content:none}
  .page .pagebreak{border:0;break-after:page;page-break-after:always}
}
@media(max-width:860px){
  .ribbon{top:0}.rulerwrap{display:none}
  .rb-g{padding:0 7px}.rb-gn{display:none}
}