/* ============================================================
   THE SCREENS' STYLING -- shared by AccSys and the course.

   How the software is laid out and drawn. Its colours are tokens
   (--accent, --ink, --paper, --msw-nav and the rest) that each product
   sets for itself -- the school's black and orange in the course,
   AccSys's navy and blue in AccSys. The only fixed ones are white text
   on a filled button or the menu, and the shadows.

   Every class here starts "msw-".
   ============================================================ */

/* the software breaks out of the reading column and fills the width */

.msw-app{
  width:100%; border:1px solid var(--rule); border-radius:6px; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow); font-size:13.4px; color:var(--ink);
}

/* ---- the bar across the top ---- */
.msw-top{
  display:flex; align-items:center; gap:12px; padding:9px 14px;
  background:var(--msw-nav); color:#fff; border-bottom:1px solid var(--msw-nav);
}
.msw-brand{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.8px; white-space:nowrap}
.msw-logo{
  width:22px; height:22px; border-radius:4px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff;
}
.msw-search{flex:1; min-width:60px; position:relative}
.msw-search input{
  width:100%; font:inherit; font-size:12px; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:4px; padding:5px 10px; outline:none;
}
.msw-search input::placeholder{color:var(--ink-faint)}
/* what the search box found, dropped down under it */
.msw-found{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40; min-width:320px; max-height:420px;
  overflow:auto; background:var(--card); border:1px solid var(--rule); border-radius:7px;
  box-shadow:0 10px 28px var(--msw-lift); padding:6px; text-align:left;
}
.msw-found[hidden]{display:none}
.msw-fhead{padding:8px 10px 4px; font-size:10.8px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
.msw-fitem{display:flex; flex-direction:column; gap:1px; padding:7px 10px; border-radius:5px; cursor:pointer; color:var(--ink)}
.msw-fitem:hover{text-decoration:none}
.msw-fitem b{font-size:12.8px; font-weight:600}
.msw-fitem span{font-size:11.8px; color:var(--ink-faint)}
.msw-fitem.on{background:var(--accent-soft)}
.msw-fitem.on b{color:var(--accent-ink)}
.msw-fmore, .msw-fnone{padding:8px 10px; font-size:12px; color:var(--ink-faint)}
.msw-new{
  background:var(--accent); color:#fff; border:0; border-radius:4px; padding:6px 12px;
  font:inherit; font-size:12.4px; font-weight:600; white-space:nowrap;
}
.msw-newwrap{position:relative}
/* + New's menu, dropped down under it and held to its right-hand edge */
.msw-newmenu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40; width:250px; max-height:480px; overflow:auto;
  background:var(--card); border:1px solid var(--rule); border-radius:7px;
  box-shadow:0 10px 28px var(--msw-lift); padding:6px; text-align:left;
}
.msw-newmenu[hidden]{display:none}
.msw-nhead{padding:8px 10px 4px; font-size:10.8px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
.msw-nitem{display:block; width:100%; text-align:left; font:inherit; font-size:12.8px; color:var(--ink);
  background:none; border:0; border-radius:5px; padding:7px 10px; cursor:pointer}
.msw-nitem:hover, .msw-nitem:focus{background:var(--accent-soft); color:var(--accent-ink); outline:none}
.msw-who{
  width:26px; height:26px; border-radius:50%; background:var(--msw-nav-soft); border:1px solid var(--msw-nav-line);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#fff;
  font-family:inherit; padding:0;
}
/* where a product says who is signed in, the badge is a button that opens
   their menu; it looks exactly as the plain badge does */
button.msw-who{cursor:pointer}

/* ---- the body: side menu and the screen ---- */
.msw-main{display:grid; grid-template-columns:186px 1fr; min-height:520px}
.msw-side{background:var(--msw-nav); padding:8px 0 16px; border-right:1px solid var(--msw-nav)}
.msw-item{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:8px 12px; background:none; border:0; border-left:3px solid transparent;
  font:inherit; font-size:12.8px; color:var(--msw-nav-ink); cursor:pointer;
}
.msw-item:hover{background:var(--msw-nav-soft); color:var(--accent)}
.msw-item.on{background:var(--msw-nav-soft); color:#fff; border-left-color:var(--accent); font-weight:600}
.msw-ic{width:20px; height:20px; flex:0 0 20px; display:inline-flex; align-items:center; justify-content:center; opacity:.9}
.msw-ic svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.msw-sidelab{
  padding:12px 14px 5px; font-size:10.4px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--msw-nav-label); font-weight:600;
}
.msw-screen{background:var(--paper); padding:16px 18px 22px; min-width:0}

/* ---- screen furniture ---- */
.msw-head{display:block; margin-bottom:14px}
.msw-head > .msw-tools{margin:12px 0 0}
/* the filters' row, held open on a tab that has none */
.msw-nofilter{min-height:31px}
.msw-head h4{margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em}
.msw-head p{margin:2px 0 0; font-size:12.4px; color:var(--ink-faint)}
.msw-tabs{display:flex; gap:2px; border-bottom:1px solid var(--rule); margin-bottom:14px; overflow-x:auto}
.msw-tab{
  background:none; border:0; border-bottom:2px solid transparent; padding:7px 12px;
  font:inherit; font-size:12.6px; color:var(--ink-soft); cursor:pointer; white-space:nowrap;
}
.msw-tab.on{color:var(--accent-ink); border-bottom-color:var(--accent); font-weight:600}
.msw-tools{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.msw-pick{
  font-size:12px; color:var(--ink-soft); background:var(--card); border:1px solid var(--rule);
  border-radius:4px; padding:5px 22px 5px 10px; white-space:nowrap;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237C868C' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center; background-size:9px 5px;
}
.msw-btn{
  font:inherit; font-size:12.2px; font-weight:600; background:var(--card); color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:4px; padding:5px 11px; cursor:pointer;
}
.msw-btn.go{background:var(--accent); border-color:var(--accent); color:#fff}
.msw-btn.ghost{background:none}
.msw-spacer{flex:1}

/* ---- cards on the dashboard ---- */
.msw-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:16px}
.msw-card{background:var(--card); border:1px solid var(--rule); border-radius:5px; padding:12px 13px}
.msw-card .lab{font-size:11.2px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
.msw-card .fig{font-size:21px; font-weight:600; margin-top:5px; letter-spacing:-.02em}
.msw-card .sub{font-size:11.6px; color:var(--ink-faint); margin-top:3px}
.msw-card.good .fig{color:var(--good)}
.msw-card.warn .fig{color:var(--warn)}
.msw-split{display:grid; grid-template-columns:1.25fr 1fr; gap:11px}
.msw-box{background:var(--card); border:1px solid var(--rule); border-radius:5px; overflow:hidden}
.msw-boxhead{
  padding:9px 13px; border-bottom:1px solid var(--rule-soft); font-size:12.6px; font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.msw-boxhead .msw-spacer + a, .msw-boxhead span.link{font-size:11.6px; color:var(--accent-ink); font-weight:500}

/* ---- tables ---- */
.msw-tw{overflow-x:auto}
.msw-tab2{width:100%; border-collapse:collapse; font-size:12.6px; background:var(--card)}
.msw-tab2 th{
  text-align:left; font-size:10.8px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint);
  font-weight:600; padding:8px 11px; border-bottom:1px solid var(--rule); background:var(--brass-soft); white-space:nowrap;
}
.msw-tab2 td{padding:9px 11px; border-bottom:1px solid var(--rule-soft); vertical-align:middle}
.msw-tab2 tr:last-child td{border-bottom:0}
.msw-tab2 td.r, .msw-tab2 th.r{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.msw-tab2 tbody tr:hover{background:var(--brass-soft)}
/* a table with many columns: its headings may take two lines rather than push
   the figures off the right-hand edge */
.msw-wraphead .msw-tab2 th{white-space:normal}
/* an account that sits under a heading is set in from it */
.msw-tab2 td.msw-under{padding-left:26px}
.msw-ref{color:var(--accent-ink); font-weight:600}
.msw-mut{color:var(--ink-faint)}
.msw-tot td{border-top:2px solid var(--rule); font-weight:600; background:var(--brass-soft)}

/* ---- status pills ---- */
.msw-pill{
  display:inline-block; font-size:10.8px; font-weight:600; letter-spacing:.03em;
  padding:2px 8px; border-radius:10px; white-space:nowrap;
}
.msw-pill.paid{background:var(--good-soft); color:var(--good)}
.msw-pill.open{background:var(--brass-soft); color:var(--brass)}
.msw-pill.late{background:var(--bad-soft); color:var(--bad)}
.msw-pill.draft{background:var(--rule-soft); color:var(--ink-faint)}
.msw-pill.part{background:var(--warn-soft); color:var(--warn)}
/* sent: out of the door, still unpaid */
.msw-pill.sent{background:var(--accent-soft); color:var(--accent-ink)}

/* ---- the to-do list on the dashboard ---- */
.msw-todo{display:flex; flex-direction:column}
.msw-todo div{
  display:flex; align-items:center; gap:9px; padding:9px 13px; border-bottom:1px solid var(--rule-soft);
  font-size:12.4px; color:var(--ink-soft);
}
.msw-todo div:last-child{border-bottom:0}
.msw-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none}
.msw-dot.q{background:var(--brass)}
.msw-todo b{color:var(--ink); font-weight:600}

/* ---- a simple bar chart, drawn in CSS ---- */
/* The bars and their key sit side by side, the key in a column the width of
   the cash flow's figures, so the months on the two charts stand in the same
   places: each month has the same share of the same width. */
.msw-chartrow{display:flex; gap:14px; padding:13px 13px 9px; align-items:stretch}
.msw-chart{flex:1; display:flex; align-items:stretch; gap:0; height:150px; padding:0; min-width:0}
.msw-bar{flex:1; display:flex; flex-direction:column; gap:5px; text-align:center; min-width:0; position:relative}
/* the pair carries the height the percentages below are measured against */
.msw-pair{flex:1; display:flex; align-items:flex-end; justify-content:center; gap:5px; min-height:0}
.msw-pair i{display:block; width:26px; max-width:40%; background:var(--accent); border-radius:2px 2px 0 0}
.msw-pair i.b{background:var(--brass)}
.msw-bar span{font-size:10.6px; color:var(--ink-faint)}
/* a year of months needs the bars closer together */
.msw-chart.many{gap:0}
.msw-chart.many .msw-bar span{font-size:9.6px; white-space:nowrap}
.msw-key{flex:0 0 230px; min-width:0; display:flex; flex-direction:column; justify-content:center;
  gap:8px; padding:0; font-size:10.8px; color:var(--ink-faint)}
/* ---- the cash flow: the line on the left, the four figures on the right ---- */
.msw-cash{display:flex; gap:14px; align-items:stretch; padding:13px 13px 9px}
.msw-cashwrap{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:6px}
/* the drawing fills this box, so a dot and the spot the pointer finds it by
   stand in the same place */
.msw-cashplot{position:relative; flex:1; min-height:150px}
.msw-cashline{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}
.msw-cashline .fill{fill:var(--accent-soft)}
.msw-cashline .line{fill:none; stroke:var(--accent); stroke-width:.6; vector-effect:non-scaling-stroke}
.msw-cashdot::before{
  content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background:var(--accent);
}
/* resting on a dot opens that month's figures over it */
.msw-cashdots{position:absolute; inset:0}
.msw-cashdot{position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; cursor:default}
.msw-cashdot:hover{background:var(--accent-soft)}
.msw-cashcard, .msw-tipcard{
  display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  z-index:30; width:210px; background:var(--card); border:1px solid var(--rule); border-radius:8px;
  box-shadow:0 10px 28px var(--msw-lift); padding:10px 12px; font-size:12.4px; color:var(--ink-soft);
  text-align:left;
}
.msw-tipcard{bottom:auto; top:8px; width:190px}
:is(.msw-cashcard, .msw-tipcard).left{left:0; transform:none}
:is(.msw-cashcard, .msw-tipcard).right{left:auto; right:0; transform:none}
.msw-cashcard.under{bottom:auto; top:calc(100% + 8px)}
.msw-cashdot:hover .msw-cashcard, .msw-bar:hover .msw-tipcard{display:block}
:is(.msw-cashcard, .msw-tipcard) .when{display:block; color:var(--ink); font-size:12.4px; margin-bottom:6px}
:is(.msw-cashcard, .msw-tipcard) > span{display:flex; justify-content:space-between; gap:12px; padding:2px 0}
:is(.msw-cashcard, .msw-tipcard) b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
:is(.msw-cashcard, .msw-tipcard) .lab.in{color:var(--good)}
:is(.msw-cashcard, .msw-tipcard) .lab.out{color:var(--bad)}
.msw-cashcard .tot{border-top:1px solid var(--rule-soft); margin-top:5px; padding-top:6px}
.msw-cashcard .tot .lab{color:var(--accent-ink)}
.msw-cashmonths{position:relative; height:26px; font-size:10.4px; color:var(--ink-faint)}
.msw-cashmonths span{position:absolute; top:0; text-align:center; white-space:nowrap}
.msw-cashmonths i{display:block; font-style:normal; font-size:9.4px; opacity:.8}
/* what the cash came to over the twelve months, beside the line */
/* ---- where the money went: the biggest costs, as a ring ----
   Each cost is a length of the circle, in the order they are listed; what is
   left over after the five biggest is gathered into one. */
.msw-costs{display:flex; gap:16px; align-items:center; padding:13px 16px; flex-wrap:wrap}
.msw-ring{position:relative; flex:0 0 150px; width:150px; height:150px}
.msw-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.msw-ring circle{fill:none; stroke-width:5.2}
.msw-ring .rest{stroke:var(--rule-soft)}
.msw-ringmid{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; gap:2px}
.msw-ringmid span{font-size:10.6px; color:var(--ink-faint)}
.msw-ringmid b{font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums}
.msw-costlist{flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:9px; font-size:12.4px}
.msw-costlist > div{display:flex; align-items:center; gap:9px; min-width:0}
.msw-costlist i{width:9px; height:9px; border-radius:2px; flex:none}
.msw-costlist .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-soft)}
.msw-costlist b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
/* one colour for each, the same in the ring as in the list */
.msw-ring .s1{stroke:var(--accent)} .msw-costlist i.s1{background:var(--accent)}
.msw-ring .s2{stroke:var(--good)}   .msw-costlist i.s2{background:var(--good)}
.msw-ring .s3{stroke:var(--warn)}   .msw-costlist i.s3{background:var(--warn)}
.msw-ring .s4{stroke:var(--blue)}   .msw-costlist i.s4{background:var(--blue)}
.msw-ring .s5{stroke:var(--bad)}    .msw-costlist i.s5{background:var(--bad)}
.msw-ring .s6{stroke:var(--brass)}  .msw-costlist i.s6{background:var(--brass)}

/* the cash line and, beside it, what the months came to */
/* the same columns as the row above, so the two panels are the same width */
.msw-cashrow{display:grid; grid-template-columns:1.25fr 1fr; gap:11px; margin-top:11px; align-items:stretch}
.msw-cashrow > .msw-box{min-width:0}
/* the same size as the list of what needs attention, beside it */
.msw-cashsum{display:flex; flex-direction:column; justify-content:center; gap:10px; font-size:12.4px; padding:13px 16px}
/* beside the line, the figures keep their own column */
.msw-cash > .msw-cashsum{flex:0 0 230px; min-width:0; padding:0}
@media (max-width:900px){
  .msw-cashrow{grid-template-columns:1fr}
  .msw-cash, .msw-chartrow{flex-wrap:wrap}
  .msw-cash > .msw-cashsum, .msw-key{flex:1 1 100%}
}
.msw-cashsum > div{display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.msw-cashsum .lab{display:flex; align-items:center; gap:7px; color:var(--ink-faint)}
.msw-cashsum b{font-size:12.4px; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.msw-cashsum .tot{border-top:1px solid var(--rule-soft); padding-top:9px}
.msw-cashsum i{width:9px; height:9px; border-radius:2px; display:block}
.msw-cashsum i.was{background:var(--rule)}
.msw-cashsum i.in{background:var(--good)}
.msw-cashsum i.out{background:var(--bad)}
.msw-cashsum i.now{background:var(--accent)}
.msw-cashsum i.won{background:var(--good)}
.msw-key span{display:flex; align-items:center; gap:5px}
.msw-key i{width:9px; height:9px; border-radius:2px; background:var(--accent); display:block}
.msw-key i.b{background:var(--brass)}

/* ---- the document form ---- */
.msw-form{background:var(--card); border:1px solid var(--rule); border-radius:5px; padding:15px}
.msw-row{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:12px}
.msw-f{display:flex; flex-direction:column; gap:4px; min-width:0}
.msw-f label{font-size:10.8px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
.msw-f input, .msw-f select{
  font:inherit; font-size:12.8px; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:4px; padding:6px 8px; min-width:0;
}
.msw-f input:focus, .msw-f select:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.msw-f input[readonly]{background:var(--brass-soft); color:var(--ink-faint)}
/* an address on a form: the same box as every other, only taller, so it can be
   read back the way it will be written on the order */
.msw-addr textarea{
  font:inherit; font-size:12.8px; line-height:1.5; width:100%; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:4px; padding:7px 9px; resize:vertical; min-height:84px;
}
.msw-addr textarea:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.msw-lines{width:100%; border-collapse:collapse; font-size:12.4px; margin-bottom:11px}
.msw-lines th{
  text-align:left; font-size:10.4px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; padding:6px 7px; border-bottom:1px solid var(--rule);
}
.msw-lines td{padding:5px 7px; border-bottom:1px solid var(--rule-soft)}
.msw-lines input, .msw-lines select{
  font:inherit; font-size:12.4px; width:100%; border:1px solid transparent; border-radius:3px;
  padding:5px 6px; background:none; color:var(--ink); min-width:0;
}
.msw-lines input:focus, .msw-lines select:focus{border-color:var(--accent); background:var(--card); outline:none}
/* a box the software fills and the clerk cannot: grey, so it reads as settled
   rather than as something waiting to be typed into */
.msw-lines input[readonly]{background:var(--band); color:var(--ink-soft); cursor:not-allowed}
/* the description box: an input to look at, but it grows down the page as the
   words need, so nothing the clerk typed is hidden when they read it back */
.msw-lines textarea{
  font:inherit; font-size:12.4px; line-height:1.45; width:100%; border:1px solid transparent;
  border-radius:3px; padding:5px 6px; background:none; color:var(--ink);
  min-width:0; resize:none; overflow:hidden; display:block;
}
.msw-lines textarea:focus{border-color:var(--accent); background:var(--card); outline:none}
.msw-lines td{vertical-align:top}
.msw-lines td.r input{text-align:right}
/* each line is one row now that the codings are behind a button of their
   own, so the rows are told apart by a line under each */
.msw-lines tbody td{border-bottom:1px solid var(--rule-soft)}
.msw-lines tbody tr:last-child td{border-bottom:0}
.msw-lines .msw-extras .msw-combo.open .msw-cbbtn{border-color:var(--accent)}
.msw-lines .msw-extras input:not([type=checkbox]){border-color:var(--rule); background:var(--card)}
/* ---- the line table on a document form ----
   Laid out the way the packages lay it out: the figures take only the room a
   figure needs, and the description keeps everything left over, because it is
   what the clerk reads back before saving. The widths are fixed so a long
   description cannot squeeze the quantity, and the table scrolls inside its
   box rather than crushing the columns on a narrow screen. */
/* The widths are shares, not fixed sizes: on a wide screen every column grows
   with the room, so an account name or a seven-figure price is never cut just
   because the description swallowed the slack. The description still holds the
   largest share, and the minimum keeps the row usable on a small screen. */
.msw-lines.msw-doc7{table-layout:fixed; min-width:880px}
.msw-lines.msw-doc7 th:nth-child(1){width:9%}
.msw-lines.msw-doc7 th:nth-child(2){width:22%}
.msw-lines.msw-doc7 th:nth-child(3){width:23%}
.msw-lines.msw-doc7 th:nth-child(4){width:6%}
.msw-lines.msw-doc7 th:nth-child(5){width:11%}
.msw-lines.msw-doc7 th:nth-child(6){width:11%}
.msw-lines.msw-doc7 th:nth-child(7){width:10%}
/* the codings' own column, where the software is keeping them */
.msw-lines.msw-doc7 th:nth-child(8){width:8%}
/* a chosen account or item is cut with an ellipsis rather than pushing its
   column wider than the room it has been given */
.msw-lines .msw-cblab{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* a figure sits under its own heading, both hard against the right of the column */
.msw-lines th.r, .msw-lines td.r{text-align:right}
/* ---- searching a list, and walking it a page at a time ---- */
/* a report read at a date: the label and the box sit together in the filter
   row, where the period chip would have been */
.msw-asat{display:inline-flex; align-items:center; gap:8px}
.msw-asat > span{font-size:12.6px; color:var(--ink-soft); font-weight:600}
.msw-asat .msw-date{width:150px}
.msw-asat .msw-date > input{
  font:inherit; font-size:12.6px; width:100%; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:6px; padding:6px 30px 6px 10px; outline:none;
}
.msw-asat .msw-date > input:focus{border-color:var(--accent)}
.msw-find{flex:1 1 220px; min-width:160px; max-width:320px}
.msw-find input{
  font:inherit; font-size:12.6px; width:100%; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:6px; padding:6px 10px; outline:none;
}
.msw-find input:focus{border-color:var(--accent)}
.msw-pager{display:flex; justify-content:flex-end; margin-top:10px}
.msw-pagebox{
  display:inline-flex; align-items:center; gap:2px; border:1px solid var(--rule);
  border-radius:8px; background:var(--card); padding:2px;
}
.msw-pagebox span{font-size:12.6px; font-weight:600; color:var(--ink); padding:0 10px; font-variant-numeric:tabular-nums}
.msw-pagebtn{
  font:inherit; font-size:15px; line-height:1; color:var(--accent); background:none; border:0;
  border-radius:6px; padding:5px 9px; cursor:pointer;
}
.msw-pagebtn:hover:not(:disabled){background:var(--accent-soft)}
.msw-pagebtn:disabled{color:var(--ink-faint); cursor:default}
/* ---- the heading of a formal statement ---- */
.msw-stmt{text-align:center; padding:18px 14px 16px; border-bottom:1px solid var(--rule)}
/* whose books these are comes first and largest, then what the statement is,
   then when it covers and what it is counted in: four sizes, each plainly
   smaller than the one above it */
.msw-stmt .co{font-size:21px; font-weight:700; color:var(--ink); letter-spacing:.01em; line-height:1.25}
.msw-stmt h5{margin:7px 0 0; font-size:15.5px; font-weight:600; color:var(--ink-soft); letter-spacing:.02em}
.msw-stmt .when{margin-top:6px; font-size:12.8px; color:var(--ink)}
.msw-stmt .cur{margin-top:3px; font-size:12.8px; color:var(--ink)}
/* The columns of a statement stand in from both edges so the page reads as a
   set of accounts rather than a screen table: the code column in from the
   left, the amount in from the right, the account names between them with
   room to breathe. */
.msw-stmtbody{padding:2px 14px 10px}
/* the figures are set as a block in the middle of the page rather than run
   from edge to edge: on a wide screen the statement stays where the eye is */
.msw-stmtbody .msw-tw{max-width:680px; margin:0 auto}
.msw-stmtbody .msw-tab2{table-layout:fixed}
.msw-stmtbody th:nth-child(1), .msw-stmtbody td:nth-child(1){width:17%; padding-left:14px}
.msw-stmtbody th:nth-child(2), .msw-stmtbody td:nth-child(2){width:55%; padding-left:24px}
.msw-stmtbody th:nth-child(3), .msw-stmtbody td:nth-child(3){width:28%; padding-right:14px}
/* a statement with two figure columns -- the trial balance -- keeps the same
   block, shared out four ways */
.msw-stmtbody.four .msw-tw{max-width:760px}
/* the project profit and loss: the project's name wide, three figures after it */
/* the VAT return: a cell the form greys out is shown as the form shows it */
.msw-vatgrey{background:var(--band)}
.msw-stmtbody.msw-projs .msw-tw{max-width:760px}
.msw-stmtbody.msw-projs :is(th, td):nth-child(1){width:40%; padding-left:14px}
.msw-stmtbody.msw-projs :is(th, td):nth-child(n+2){width:20%; padding-left:10px; padding-right:14px}
/* one project's transactions: as wide as the card, each column as wide as it needs */
.msw-stmtbody.msw-projtx .msw-tw{max-width:none}
.msw-stmtbody.msw-projtx .msw-tab2{table-layout:auto}
.msw-stmtbody.msw-projtx :is(th, td){width:auto; padding-left:10px; padding-right:10px}
.msw-stmtbody.four th:nth-child(1), .msw-stmtbody.four td:nth-child(1){width:15%; padding-left:14px}
.msw-stmtbody.four th:nth-child(2), .msw-stmtbody.four td:nth-child(2){width:45%; padding-left:24px}
.msw-stmtbody.four th:nth-child(3), .msw-stmtbody.four td:nth-child(3){width:20%; padding-right:10px}
.msw-stmtbody.four th:nth-child(4), .msw-stmtbody.four td:nth-child(4){width:20%; padding-right:14px}
.msw-sum{display:flex; justify-content:flex-end}
/* what the offer is subject to, written beside the totals: room to say it in
   full, and it goes out on the customer's copy */
.msw-below{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap}
.msw-below > .msw-tc{flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:4px}
.msw-tc > label{font-size:10.8px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
.msw-below > .msw-sum{flex:0 1 auto; margin-left:22px}
.msw-tc > textarea{
  font:inherit; font-size:12.8px; line-height:1.55; width:100%; color:var(--ink);
  background:var(--card); border:1px solid var(--rule); border-radius:4px;
  padding:8px 9px; resize:vertical; min-height:96px;
}
.msw-tc > textarea:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.msw-sumbox{width:280px; max-width:100%; font-size:12.8px}
.msw-sumbox div{display:flex; justify-content:space-between; padding:5px 0}
.msw-sumbox div.tot{border-top:2px solid var(--rule); margin-top:4px; padding-top:8px; font-weight:600; font-size:14.6px}
.msw-sumbox b{font-variant-numeric:tabular-nums}
.msw-foot{display:flex; gap:8px; align-items:center; margin-top:14px; border-top:1px solid var(--rule-soft); padding-top:13px}

/* ---- the note under the software, in the course's own voice ---- */
.msw-note{
  background:var(--band); border-radius:0 0 6px 6px; padding:11px 14px;
  font-size:13px; line-height:1.55; color:var(--ink-soft); border-top:1px solid var(--rule);
}
.msw-note b{color:var(--ink)}

/* ---- narrow screens: the menu becomes a strip along the top ---- */
@media (max-width:900px){
  .msw-main{grid-template-columns:1fr}
  .msw-side{display:flex; overflow-x:auto; padding:0; border-right:0; border-bottom:1px solid var(--msw-nav)}
  .msw-sidelab{display:none}
  .msw-item{width:auto; white-space:nowrap; border-left:0; border-bottom:3px solid transparent; padding:9px 12px}
  .msw-item.on{border-left:0; border-bottom-color:var(--accent)}
  .msw-cards{grid-template-columns:repeat(2,1fr)}
  .msw-split{grid-template-columns:1fr}
  .msw-row{grid-template-columns:repeat(2,1fr)}
  .msw-search{display:none}
}
@media (max-width:560px){
  .msw-cards{grid-template-columns:1fr}
  .msw-row{grid-template-columns:1fr}
}

/* the tray's Open control is a link, so it must sit like the buttons beside it */
a.msw-btn{display:inline-block; text-decoration:none; line-height:1.35}
a.msw-btn:hover{border-color:var(--accent); color:var(--accent-ink)}
/* the statement picker is a real select, dressed as the filter chips beside it */
select.msw-pick{appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer}
/* a report name that can be opened */
.msw-link{color:var(--accent-ink); cursor:pointer; border-bottom:1px solid var(--accent-soft)}
.msw-link:hover{border-bottom-color:var(--accent)}
/* a field that needs the room, such as a journal narrative */
.msw-f.wide{grid-column:span 2}
@media (max-width:900px){ .msw-f.wide{grid-column:span 2} }
/* a figure the system works out, not one that is typed */
.msw-lines td.msw-calc{font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; white-space:nowrap}

/* ---- the picker: a closed box, and a panel with a search field ---- */
.msw-combo{position:relative; min-width:0}
.msw-cbbtn{
  font:inherit; font-size:12.8px; width:100%; min-width:0; display:flex; align-items:center; gap:8px;
  text-align:left; background:var(--card); color:var(--ink); cursor:pointer;
  border:1px solid var(--rule); border-radius:4px; padding:6px 9px;
}
.msw-cbbtn:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.msw-combo.open .msw-cbbtn{border-color:var(--accent)}
.msw-cblab{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msw-cblab.ph{color:var(--ink-faint)}
.msw-cbchev{
  flex:none; width:7px; height:7px; margin:0 3px 3px 0;
  border-right:1.6px solid var(--ink-faint); border-bottom:1.6px solid var(--ink-faint); transform:rotate(45deg);
}
.msw-combo.open .msw-cbchev{transform:rotate(-135deg); margin:3px 3px 0 0; border-color:var(--accent)}
.msw-lines .msw-cbbtn{font-size:12.4px; border-color:transparent; background:none; padding:5px 6px}
.msw-lines .msw-cbbtn:hover, .msw-lines .msw-combo.open .msw-cbbtn{border-color:var(--rule); background:var(--card)}
.msw-cbmenu{
  position:fixed; z-index:60; display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--rule); border-radius:7px; box-shadow:0 10px 28px var(--msw-lift); padding:6px;
}
.msw-cbmenu[hidden]{display:none}
.msw-cbsearch{position:relative; flex:none; margin-bottom:6px}
.msw-cbsearch::before{
  content:""; position:absolute; left:10px; top:50%; width:8px; height:8px; margin-top:-6px;
  border:1.6px solid var(--ink-faint); border-radius:50%;
}
.msw-cbsearch::after{
  content:""; position:absolute; left:18px; top:50%; width:5px; height:1.6px; margin-top:3px;
  background:var(--ink-faint); transform:rotate(45deg);
}
.msw-cbmenu .msw-comboin{
  font:inherit; font-size:12.8px; width:100%; color:var(--ink); background:var(--card);
  border:1px solid var(--accent); border-radius:5px; padding:7px 9px 7px 30px; outline:none;
}
.msw-cblist{overflow-y:auto; min-height:0; flex:1}
.msw-cbgrp{font-size:12.2px; font-weight:700; color:var(--ink); padding:9px 10px 4px}
.msw-cbgrp[hidden]{display:none}
.msw-cbopt{padding:7px 10px; border-radius:5px; cursor:pointer; font-size:12.6px; color:var(--ink); white-space:nowrap}
.msw-cbopt[data-grp]{padding-left:22px}
.msw-cbopt[hidden]{display:none}
.msw-cbopt.on{background:var(--accent); color:#fff}
.msw-cbnone{padding:8px 10px; font-size:12.4px; color:var(--ink-faint)}
.msw-cbnone[hidden]{display:none}

/* ---- a field that has to be filled ---- */
.msw-f label.msw-must, .msw-lines th.msw-must{color:var(--bad)}
.msw-must .msw-star{margin-left:1px}
/* an asset bought inside the period being reported */
.msw-pill.new{background:var(--accent-soft); color:var(--accent-ink)}

/* ---- a menu section that opens to show what is inside it ---- */
/* the arrow sits before the name, and turns down when the list is open */
.msw-caret{width:12px; height:12px; flex:0 0 12px; display:inline-flex; align-items:center; justify-content:center;
  opacity:.75; transition:transform .12s ease}
.msw-caret svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.msw-caret.down{transform:rotate(90deg)}
.msw-caret.msw-nocaret{opacity:0}
.msw-item.msw-sub{
  padding-left:52px; font-size:12.6px; background:var(--msw-nav-deep);
}
.msw-item.msw-sub.on{background:var(--msw-nav-soft); color:#fff}
@media (max-width:900px){
  .msw-caret{display:none}
  .msw-item.msw-sub{padding-left:12px}
}
/* the message bar, when something was refused rather than done */
.msw-note.bad{background:var(--bad-soft); color:var(--bad)}
.msw-note.bad b{color:var(--bad)}

/* ---- a date box, with a calendar beneath it ---- */
.msw-date{position:relative; min-width:0}
.msw-date input{width:100%; padding-right:34px}
.msw-calbtn{
  position:absolute; right:1px; top:1px; bottom:1px; width:32px; border:0; background:none; cursor:pointer;
}
/* a small calendar drawn in lines: the page, its binding, and a row of days */
.msw-calbtn::before{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:11px; margin:-5px 0 0 -6px;
  border:1.5px solid var(--ink-faint); border-top-width:3px; border-radius:2px; box-sizing:border-box;
}
.msw-calbtn::after{
  content:""; position:absolute; left:50%; top:50%; width:6px; height:1.5px; margin:1px 0 0 -3px;
  background:var(--ink-faint); box-shadow:0 2.5px 0 var(--ink-faint);
}
.msw-date.open .msw-calbtn::before{border-color:var(--accent)}
.msw-date.open .msw-calbtn::after{background:var(--accent); box-shadow:0 2.5px 0 var(--accent)}
.msw-date.open input{border-color:var(--accent)}
.msw-cal{
  position:fixed; z-index:60; width:252px; background:var(--card); border:1px solid var(--rule);
  border-radius:7px; box-shadow:0 10px 28px var(--msw-lift); padding:10px;
}
.msw-cal[hidden]{display:none}
.msw-calhead{display:flex; align-items:center; justify-content:space-between; margin:0 2px 8px}
.msw-calhead b{font-size:13px; color:var(--ink)}
.msw-calnav{width:26px; height:26px; border-radius:5px; cursor:pointer; position:relative}
.msw-calnav:hover{background:var(--rule-soft)}
.msw-calnav::before{
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px;
  border-left:1.6px solid var(--ink-soft); border-bottom:1.6px solid var(--ink-soft);
}
.msw-calprev::before{transform:translate(-30%, -50%) rotate(45deg)}
.msw-calnext::before{transform:translate(-70%, -50%) rotate(-135deg)}
.msw-calgrid{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; text-align:center}
.msw-calwd{font-size:10.8px; font-weight:600; color:var(--ink-faint); padding:3px 0 5px}
.msw-calday{font-size:12.6px; color:var(--ink); line-height:30px; border-radius:5px; cursor:pointer}
.msw-calday:hover{background:var(--accent-soft); color:var(--accent-ink)}
/* today is picked out whether or not it is the day chosen: the ring, the
   colour and the weight, so the eye lands on it at once */
.msw-calday.today{box-shadow:inset 0 0 0 2px var(--accent); background:var(--accent-soft);
  color:var(--accent-ink); font-weight:700}
.msw-calday.today.on{background:var(--accent); color:#fff}
.msw-calday.on{background:var(--accent); color:#fff; font-weight:600}
.msw-calfoot{display:flex; justify-content:flex-end; margin-top:8px; padding-top:7px; border-top:1px solid var(--rule-soft)}
.msw-calclear{font-size:12px; color:var(--accent-ink); cursor:pointer}
/* ---- a filter chip that opens a list: the whole chip, arrow included ---- */
.msw-dd{position:relative; display:inline-block}
.msw-ddbtn{font:inherit; font-size:12px; cursor:pointer; text-align:left}
.msw-ddbtn b{color:var(--ink)}
.msw-dd.open .msw-ddbtn{border-color:var(--accent)}
.msw-ddmenu{
  position:fixed; z-index:60; display:flex; gap:6px; background:var(--card); border:1px solid var(--rule);
  border-radius:7px; box-shadow:0 10px 28px var(--msw-lift); padding:6px; overflow:auto;
}
.msw-ddmenu[hidden]{display:none}
.msw-ddlist{min-width:170px; flex:none}
.msw-ddopt{padding:7px 10px; border-radius:5px; cursor:pointer; font-size:12.6px; color:var(--ink); white-space:nowrap}
.msw-ddopt:hover{background:var(--accent-soft); color:var(--accent-ink)}
.msw-ddopt.on, .msw-ddopt.on:hover{background:var(--accent); color:#fff}
/* A filter that takes several answers at once ticks them instead of painting
   them solid: the tick says "as many as you like", and a chosen row is tinted
   the way a ticked row is everywhere else in the software. */
.msw-ddlist.multi .msw-ddopt{display:flex; align-items:center; gap:8px}
.msw-ddlist.multi .msw-ddopt.on, .msw-ddlist.multi .msw-ddopt.on:hover{background:var(--accent-soft); color:var(--accent-ink)}
.msw-ddtick{width:15px; height:15px; margin:0; flex:none; accent-color:var(--accent); pointer-events:none}
/* Custom: two months side by side, dropping one under the other on a phone */
.msw-ddmenu.wide .msw-ddlist{min-width:140px; border-right:1px solid var(--rule-soft); padding-right:6px}
.msw-range{padding:6px 8px 4px; min-width:0}
.msw-rboxes{display:flex; gap:14px}
.msw-rboxes .msw-rbox{flex:1}
.msw-rbox input{
  font:inherit; font-size:12.8px; width:100%; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:5px; padding:7px 9px; outline:none;
}
.msw-rbox input:focus{border-color:var(--accent)}
.msw-rcals{display:flex; flex-wrap:wrap; gap:14px; margin-top:12px}
.msw-rcal{width:236px}
.msw-calday.inrange{background:var(--accent-soft); color:var(--accent-ink); border-radius:0}
.msw-rcal .msw-calday.today{box-shadow:inset 0 0 0 2px var(--accent)}
.msw-rerr{margin-top:8px; font-size:12px; color:var(--bad)}
.msw-rerr[hidden]{display:none}
.msw-rfoot{display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid var(--rule-soft)}
.msw-rsum{font-size:12.4px; color:var(--ink); font-weight:600}
.msw-rbtn{
  font:inherit; font-size:12.2px; font-weight:600; background:var(--card); color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:4px; padding:5px 11px; cursor:pointer;
}
.msw-rbtn.go{background:var(--accent); border-color:var(--accent); color:#fff}
@media (max-width:640px){
  .msw-ddmenu.wide{flex-direction:column}
  .msw-ddmenu.wide .msw-ddlist{border-right:0; padding-right:0; border-bottom:1px solid var(--rule-soft); padding-bottom:6px}
}

/* ---- the ledger's own controls, and the two sides of an application ---- */
.msw-ledbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:12px 0 4px}
.msw-ledbar .msw-check{margin-top:0}
.msw-two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:720px){ .msw-two{grid-template-columns:1fr} }
.msw-two .msw-popsec{margin-top:10px}
/* two ledgers side by side need the room: the window widens for them, the
   dates and figures stay on their own line, and only the description wraps */
.msw-popbox:has(.msw-two){max-width:1240px}
.msw-two th, .msw-two td{white-space:nowrap}
/* a date never breaks across two lines in a window's table; the narrative is
   the column with room to wrap */
.msw-popbody .msw-tab2 td:first-child, .msw-popbody .msw-tab2 th:first-child{white-space:nowrap}
.msw-two th:nth-child(4), .msw-two td:nth-child(4){white-space:normal; min-width:120px}
.msw-two td.msw-tick{width:34px; text-align:center}
.msw-two input[type=checkbox]{width:16px; height:16px; accent-color:var(--accent); cursor:pointer; margin:0}
.msw-unapply{cursor:pointer}
.msw-unapply:hover{outline:1px solid var(--accent)}

/* ---- a form opened over the list it belongs to ----
   The same ground and the same card as a document window, but the form inside
   is drawn by the screen, so every picker and button on it behaves as it does
   on a full page. */
.msw-over{
  position:fixed; inset:0; z-index:900; background:var(--msw-scrim); overflow:auto;
  display:flex; align-items:flex-start; justify-content:center; padding:7vh 14px 30px;
}
.msw-overbox{
  width:100%; max-width:860px; background:var(--paper); border-radius:8px;
  box-shadow:0 18px 50px rgba(0,0,0,.3); padding:16px 18px 18px;
}
.msw-overbox .msw-head{margin-bottom:12px}
/* the mark belongs to the page behind, not to the card over it */
.msw-overbox .msw-atfoot{margin-bottom:0}

/* ---- a document opened over the page ---- */
.msw-pop{
  position:fixed; inset:0; z-index:1000; background:var(--msw-scrim); overflow:auto;
  display:flex; align-items:flex-start; justify-content:center; padding:6vh 14px 30px;
  font-size:13.4px; color:var(--ink);
}
.msw-pop[hidden]{display:none}
/* A record's window takes most of the screen: a ledger page, an invoice or a
   bank sheet is a wide thing, and reading one in a narrow column wraps every
   description and pushes the figures out of line. It is still a window, not a
   screen, so a margin is left around it. */
.msw-popbox{width:100%; max-width:1080px; background:var(--paper); border-radius:8px; box-shadow:0 18px 50px rgba(0,0,0,.3)}
.msw-pophead{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--rule); background:var(--card); border-radius:8px 8px 0 0}
.msw-pophead h4{margin:0; font-size:15.5px; color:var(--ink)}
.msw-popx{border:0; background:none; font-size:24px; line-height:1; width:34px; height:34px; border-radius:5px; cursor:pointer; color:var(--ink-faint)}
.msw-popx:hover{background:var(--rule-soft); color:var(--ink)}
.msw-popbody{padding:16px}
.msw-facts{display:grid; grid-template-columns:repeat(auto-fill, minmax(165px, 1fr)); gap:12px 18px; margin-bottom:6px}
.msw-facts > div > span:first-child{display:block; font-size:10.8px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; margin-bottom:2px}
.msw-facts b{font-weight:600; color:var(--ink)}
.msw-popsec{font-size:11.4px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin:16px 0 6px}
.msw-poptot{display:flex; justify-content:flex-end; margin-top:8px}
.msw-poptot .msw-tw{width:100%; max-width:320px; border:1px solid var(--rule); border-radius:5px}
.msw-poptot thead{display:none}
.msw-open{cursor:pointer}
.msw-open:hover{text-decoration:underline}

/* ---- the button that fills the window, and the window filled ---- */
.msw-lastnote{display:flex; align-items:center; gap:14px}
.msw-lastnote > span{flex:1; min-width:0}
.msw-fullbtn{
  flex:none; font:inherit; font-size:12.4px; font-weight:600; white-space:nowrap; cursor:pointer;
  background:var(--card); color:var(--ink-soft); border:1px solid var(--rule); border-radius:4px; padding:6px 11px;
}
.msw-fullbtn:hover{border-color:var(--accent); color:var(--accent-ink)}
.msw-fullbtn span{font-size:13px; margin-right:3px}
html.msw-noscroll, html.msw-noscroll body{overflow:hidden}
#msw-app.msw-fullwin{position:fixed; inset:0; z-index:900; background:var(--paper); display:flex; font-size:14px; color:var(--ink)}
.msw-fullwin .msw-app{flex:1; display:flex; flex-direction:column; min-height:0; border:0; border-radius:0; box-shadow:none}
.msw-fullwin .msw-main{flex:1; min-height:0}
.msw-fullwin .msw-screen, .msw-fullwin .msw-side{overflow:auto}
.msw-fullwin .msw-note{border-radius:0}
@media (max-width:640px){
  .msw-lastnote{flex-direction:column; align-items:stretch}
  .msw-fullbtn{align-self:flex-end}
}

/* the add-a-line button, under the lines it adds to */
.msw-addline{margin:8px 0 2px}
.msw-addline .msw-btn{font-weight:600}

/* ---- ticking the documents a receipt or payment clears ---- */
.msw-settle td.msw-tick{width:34px; text-align:center}
.msw-settle input[type=checkbox]{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}
.msw-settle tr.on td{background:var(--accent-soft)}
/* the amount to clear sits beside what is outstanding, in a box that shows
   whether or not the row is ticked, so it is plain where the figure goes */
.msw-settle th:nth-child(1){width:44px}
.msw-settle th:nth-child(5){width:22%}
.msw-settle th:nth-child(6){width:170px}
.msw-settle td, .msw-settle th{white-space:nowrap}
.msw-settle td input[data-mf=alloc]{
  width:100%; text-align:right; border:1px solid var(--rule); background:var(--card);
}
.msw-settle td input[data-mf=alloc]::placeholder{color:var(--ink-faint)}

/* ---- a form of boxes one under another, labels beside them ---- */
.msw-stack{max-width:660px}
.msw-srow{display:grid; grid-template-columns:200px 1fr; gap:14px; align-items:center; margin-bottom:11px}
.msw-srow:has(textarea){align-items:start}
.msw-srow:has(textarea) > label{padding-top:8px}
.msw-srow > label{margin:0; font-size:10.8px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:600}
.msw-srow > label.msw-must{color:var(--bad)}
.msw-sbox{min-width:0}
.msw-sbox > input, .msw-sbox > .msw-date > input{
  font:inherit; font-size:12.8px; width:100%; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:4px; padding:7px 9px;
}
/* a date sits in the same box as everything else on the row: the calendar
   button is inside it, so the input keeps room for it on the right */
.msw-sbox > .msw-date > input{padding-right:34px}
/* a picker on a stacked row stands as tall as the boxes above and below it */
.msw-sbox > .msw-combo > .msw-cbbtn{padding:7px 9px}
/* a note sits in the same box as everything else on the row, only taller */
.msw-sbox > textarea{
  font:inherit; font-size:12.8px; width:100%; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:4px; padding:7px 9px; resize:vertical;
}
.msw-sbox input:focus, .msw-sbox textarea:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.msw-sbox input[readonly]{background:var(--brass-soft); color:var(--ink-faint)}
/* a box with something fixed on one side or both: MUR, Net ... days, a dialling code */
.msw-igroup{display:flex; align-items:stretch; border:1px solid var(--rule); border-radius:4px; background:var(--card); overflow:visible}
.msw-igroup:focus-within{border-color:var(--accent); outline:2px solid var(--accent-soft)}
.msw-igroup > input{
  flex:1; min-width:0; font:inherit; font-size:12.8px; color:var(--ink); background:none;
  border:0; padding:7px 9px; outline:none;
}
.msw-addon{display:flex; align-items:center; padding:0 11px; background:var(--band); color:var(--ink-soft); font-size:12.4px}
.msw-addon:first-child{border-right:1px solid var(--rule); border-radius:3px 0 0 3px}
.msw-addon:last-child{border-left:1px solid var(--rule); border-radius:0 3px 3px 0}
.msw-terms{max-width:220px}
.msw-terms > input{text-align:right}
.msw-phone .msw-combo{flex:none; width:108px; border-right:1px solid var(--rule)}
.msw-phone .msw-cbbtn{border:0; border-radius:3px 0 0 3px; background:var(--band); height:100%}
.msw-check{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12.6px; color:var(--ink-soft); cursor:pointer}
.msw-check input{width:16px; height:16px; accent-color:var(--accent); margin:0}
@media (max-width:640px){
  .msw-srow{grid-template-columns:1fr; gap:4px}
}

/* ---- counting goods in against an order ---- */
/* the counted columns are figures, not prose: they take only the width they need */
.msw-grn th:nth-child(2){width:100%}
.msw-grn th:nth-child(3), .msw-grn th:nth-child(4), .msw-grn th:nth-child(5){width:110px; white-space:nowrap}
.msw-grn th:nth-child(6){width:130px}
.msw-grn td input[data-mf=qty]{width:100%; max-width:130px; margin-left:auto; display:block; text-align:right;
  border:1px solid var(--rule); background:var(--card)}
.msw-grn td input[readonly]{background:var(--brass-soft); color:var(--ink-faint)}

/* the module under the pointer wears the software's orange -- that one only.
   Written after the rules for the chosen module and the chosen sub-module, so
   the pointer wins over both and the row being pointed at is the orange one. */
.msw-item:hover, .msw-item.on:hover, .msw-item.msw-sub:hover,
.msw-item.msw-sub.on:hover{background:var(--msw-nav-soft); color:var(--accent)}

/* acting things darken a shade under the pointer */
.msw-btn.go:hover, .msw-rbtn.go:hover, .msw-new:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.msw-btn:not(.go):hover, .msw-fullbtn:hover{border-color:var(--accent); color:var(--accent-ink)}

/* ---- the AccSys wordmark, at the left of the bar across the top ---- */
.msw-headrow{display:flex; align-items:flex-start; gap:16px}
.msw-headrow .msw-headtext{flex:1; min-width:0}
/* ---- the logo ----
   The artwork itself, carried in the stylesheet so it is there the moment
   the software is, wherever the software is shown -- a page of its own, a
   lesson, a file saved to a disk. The letters stay in the mark for anything
   that reads the page aloud (role="img", aria-label="AccSys"); they are not
   drawn, so nothing about the software's type touches the logo. */
.msw-wordmark{
  /* the artwork is 406 by 160, so the width is the height times 2.54; it is
     written out rather than left to aspect-ratio, which the page the course
     sits in does not always honour */
  flex:none; display:inline-block; width:86px; height:34px;
  background:url("data:image/png;base64,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") no-repeat left center;
  background-size:contain;
  font-size:0; line-height:0; color:transparent; user-select:none; white-space:nowrap;
}
/* level with everything else along the bar -- the search box, + New, the
   badge -- so the bar itself is no taller for it */
.msw-top .msw-wordmark{width:86px; height:34px}
@media (max-width:560px){ .msw-top .msw-wordmark{width:71px; height:28px} }

/* ---- the company, above every screen's title ---- */
.msw-cohead{display:flex; align-items:center; gap:10px; margin:0 0 12px; color:var(--ink)}
.msw-cohead .msw-logo{width:34px; height:34px; flex:none; border-radius:10px}
.msw-cohead .msw-logo svg{width:20px; height:20px}
/* a long name is cut short, in full on hover */
.msw-cohead .msw-coname{min-width:0; font-size:15px; font-weight:700; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* a form opened over a list has the company on the page behind it */
.msw-overbox .msw-cohead{display:none}

/* ---- the receipt's lines: the account wide, the amount in a box that shows ---- */
.msw-rvlines th:nth-child(1){width:42%}
.msw-rvlines th:nth-child(3){width:180px}
.msw-rvlines td input[data-mf=amt]{border:1px solid var(--rule); background:var(--card)}

/* ---- the payment's lines ---- */
.msw-pmlines th:nth-child(1){width:20%}
.msw-pmlines th:nth-child(3){width:70px}
.msw-pmlines th:nth-child(4), .msw-pmlines th:nth-child(5){width:130px}
.msw-pmlines th:nth-child(6){width:15%}

/* ---- Settings: the projects ---- */
.msw-projset .msw-projon{margin:0 0 4px; font-size:13.4px; font-weight:600; color:var(--ink)}
.msw-projlist{margin-top:12px}
.msw-projlist td input:not([type=checkbox]){width:100%; max-width:420px; border:1px solid var(--rule); background:var(--card)}
.msw-projlist .msw-projact{width:120px}
.msw-projlist .msw-projact .msw-check{margin:0}
.msw-projlist .msw-projdel{width:80px; text-align:center}
.msw-projlist td{vertical-align:middle}

/* ---- asking before a form with something in it is left ---- */
.msw-ask{align-items:center; z-index:1100}
.msw-askbox{width:100%; max-width:440px; background:var(--card); border-radius:8px; box-shadow:0 18px 50px rgba(0,0,0,.3); padding:20px 22px}
.msw-askbox h4{margin:0 0 8px; font-size:16px; color:var(--ink)}
.msw-askbox p{margin:0 0 16px; font-size:13px; line-height:1.55; color:var(--ink-soft)}
.msw-askbtns{display:flex; gap:8px; flex-wrap:wrap}

/* ---- a filter that takes more than one choice ---- */

/* ---- the reconciliation worksheet ---- */
.msw-recon th.msw-tick, .msw-recon td.msw-tick{width:44px; text-align:center}
.msw-recon td.msw-tick input, .msw-recon th.msw-tick input{width:16px; height:16px; accent-color:var(--accent); margin:0; cursor:pointer}
.msw-recon tr.on td{background:var(--accent-soft)}
.msw-recon tr.msw-openrow td{background:var(--brass-soft); font-size:12.6px}

/* ---- a stacked form whose boxes are only as wide as their figures need ---- */
.msw-half .msw-sbox{max-width:195px}
.msw-srow > .msw-sublab{grid-column:1; margin-top:-8px; font-size:11px; font-style:italic; color:var(--ink-faint)}
.msw-srow:has(> .msw-sublab){align-items:start}
.msw-srow > .msw-sublab + .msw-sbox{grid-column:2; grid-row:1 / span 2}
.msw-formfoot, .msw-tools.msw-atfoot{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule-soft)}

/* ---- what can be done with the document the window is showing ---- */
.msw-popacts{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule-soft)}
.msw-popacts .msw-btn.bad{color:var(--bad)}
.msw-popacts .msw-btn.bad:hover{border-color:var(--bad); background:rgba(200,40,40,.08)}

/* the arrow on a way back: a little larger than the words, and lifted to sit level with them */
.msw-backarr{font-size:1.35em; line-height:0; position:relative; top:.04em; margin-right:2px}

/* ---- the entry a form would make, shown under the form ----
   The same table as everywhere else, with the money columns to the right and
   the totals under a rule, so the debits and the credits are read the way
   they are read in the ledger. */
.msw-prevbox{margin-top:15px}
.msw-prevbox .msw-boxhead{justify-content:space-between}
.msw-prevbox .msw-boxhead .msw-mut{font-weight:500; font-size:11.4px; text-transform:none; letter-spacing:0}
.msw-prevsaid{margin:0; padding:9px 13px 0; font-size:12.4px; color:var(--ink-soft)}
.msw-prevnone{margin:0; padding:13px; font-size:12.4px; color:var(--ink-faint)}
.msw-prevtab td{font-variant-numeric:tabular-nums}
.msw-prevtab tfoot td{
  border-top:2px solid var(--rule); font-size:12.6px; color:var(--ink-soft);
  padding-top:9px; padding-bottom:11px;
}
.msw-prevtab tfoot b{color:var(--ink)}

/* ---- Account Lookup: the account's name opens its ledger, as its code does ---- */
.msw-ledname{color:var(--accent-ink); cursor:pointer}
.msw-ledname:hover{text-decoration:underline}

/* ---- a box still to be filled in, on a form that has been refused ----
   The complaint underneath says what is wrong; this says where. It goes as
   soon as something is put in the box. */
:is(#msw-app, #msw-pop) :is(input, select, textarea).msw-need{
  border-color:var(--bad); background:var(--bad-soft);
}
:is(#msw-app, #msw-pop) .msw-combo.msw-need > .msw-cbbtn{
  border-color:var(--bad); background:var(--bad-soft);
}
:is(#msw-app, #msw-pop) .msw-combo.msw-need > .msw-cbbtn .msw-cblab.ph{color:var(--bad)}

/* ---- what a line is coded to: a button at its end, and the box it opens ----
   The project, the branch and the tax treatment were a line of their own
   under every line. They are behind this instead, so a document of five
   lines reads as five lines. */
.msw-codecell{width:1%; white-space:nowrap}
.msw-codebtn{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  font:inherit; font-size:11.6px; font-weight:600; color:var(--accent-ink);
  background:var(--accent-soft); border:1px solid rgba(108,76,241,.22); border-radius:999px;
  padding:4px 11px 4px 9px; cursor:pointer; overflow:hidden;
}
.msw-codebtn:hover{border-color:var(--accent)}
.msw-codesaid{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msw-codetag{
  width:12px; height:12px; flex:none; border-radius:3px 0 0 3px;
  background:currentColor; opacity:.55;
  clip-path:polygon(0 35%, 55% 0, 100% 0, 100% 100%, 55% 100%, 0 65%);
}
.msw-codebtn.msw-need{
  background:var(--bad-soft); border-color:var(--bad); color:var(--bad);
}
/* the box the button opens */
/* the box stands on the page, outside the software's own frame, so it takes
   the frame's own measure of a box's width with it */
.msw-codingback, .msw-codingback *{box-sizing:border-box}
.msw-codingback{
  position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center;
  background:var(--msw-scrim); padding:6vh 14px; backdrop-filter:blur(2px);
  font-family:"Plus Jakarta Sans", "Inter", system-ui, sans-serif; color:var(--ink);
}
.msw-codingbox{
  width:100%; max-width:380px; background:var(--card); border-radius:16px; padding:22px 22px 18px;
  box-shadow:0 24px 60px -12px rgba(17,24,39,.3);
}
.msw-codingbox h4{margin:0 0 4px; font-size:16px; font-weight:700; color:var(--ink)}
.msw-codingbox > p{margin:0 0 16px; font-size:12.6px; color:var(--ink-faint)}
.msw-codingf{display:block; margin:0 0 12px}
.msw-codingf > span{
  display:block; margin:0 0 5px; font-size:12.2px; font-weight:600; color:var(--ink-soft);
}
.msw-codingf .msw-combo{width:100%}
.msw-codingf .msw-cbbtn{width:100%}
.msw-codingacts{display:flex; gap:8px; justify-content:flex-end; margin-top:16px}