/* ============================================================
   ACCSYS -- the page around the shared screens.

   The screens look exactly as they do in the course: their colours,
   type and layout come from packages/ui (msw-base.css, msw.css,
   msw-look.css). This
   file holds only what the page adds around them.
   ============================================================ */

/* The page takes the screens' own ground AND their own type. The software
   sets its type on its own containers; the page around it -- the gate, the
   message bar, the windows the shell opens itself -- is outside them, and
   was left with the browser's own serif. */
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
body :is(h1, h2, h3, h4){font-family:inherit; font-weight:700; letter-spacing:-.015em; margin:0}
body :is(button, input, select, textarea){font-family:inherit}
/* The software fills the window, edge to edge and top to bottom: in AccSys it
   is all there is on the page. The menu and the screen each scroll on their
   own, so the menu stays where it is down a long list. The spacing inside
   the screens is the shared screens' own, unchanged. */
html, body{height:100%}
.accsys-page{height:100vh; display:flex; flex-direction:column}
#msw-app{flex:1; display:flex; min-height:0}
/* the software is not on the page at all while the gate is: without this the
   hidden frame still takes its half of the height */
#msw-app[hidden]{display:none}
#msw-app > .msw-app{flex:1; display:flex; flex-direction:column; min-height:0;
                    border:0; border-radius:0; box-shadow:none}
#msw-app .msw-main{flex:1; min-height:0}
#msw-app .msw-screen, #msw-app .msw-side{overflow:auto}

/* the note under the software and its full-window button belong to the course,
   where the software sits inside a lesson; here it already has the window */
.msw-lastnote{display:none}

/* a refusal that came back from the server, over the software, until clicked */
.accsys-msg{
  margin:0; padding:9px 12px; border-left:4px solid var(--bad);
  background:var(--bad-soft); color:var(--bad); font-size:13.5px; cursor:pointer;
  font-family:"Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}

/* ---- Settings: a grid of the settings, each opening its page ---- */
.acc-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px 18px; padding:6px 0 14px}
.acc-tiles.later{border-top:1px solid var(--rule); padding-top:16px}
.acc-tile{
  display:flex; align-items:center; gap:14px; padding:14px 12px; border:0; border-radius:12px;
  background:none; font:inherit; font-size:14px; font-weight:500; color:var(--ink); text-align:left; cursor:pointer;
}
.acc-tile:hover{background:var(--card); box-shadow:var(--shadow)}
.acc-tile.off{color:var(--ink-faint); opacity:.55; cursor:default}
.acc-tile.off:hover{background:none; box-shadow:none}
/* each setting's icon in a rounded square of its own colour, in turn */
.acc-ic{width:40px; height:40px; flex:none; display:flex; align-items:center; justify-content:center;
        border-radius:12px; background:var(--accent-soft)}
.acc-ic svg{width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.5;
            stroke-linecap:round; stroke-linejoin:round}
.acc-tile:nth-child(4n+2) .acc-ic{background:var(--blue-soft)}
.acc-tile:nth-child(4n+2) .acc-ic svg{stroke:var(--blue)}
.acc-tile:nth-child(4n+3) .acc-ic{background:var(--good-soft)}
.acc-tile:nth-child(4n+3) .acc-ic svg{stroke:var(--good)}
.acc-tile:nth-child(4n+4) .acc-ic{background:var(--warn-soft)}
.acc-tile:nth-child(4n+4) .acc-ic svg{stroke:var(--warn)}
.acc-tile.off .acc-ic{background:var(--band)}
.acc-tile.off .acc-ic svg{stroke:var(--ink-faint)}

/* ---- Business Details: one box below another ---- */
.acc-stack{max-width:620px}
.acc-stack .msw-f{margin-bottom:14px}
.acc-stack .msw-f input + input{margin-top:6px}
.acc-stack .msw-f input + .msw-combo{margin-top:6px}
.acc-stack .msw-combo .msw-cbbtn{width:100%; padding:8px 9px}
.acc-fy{display:flex; gap:10px; align-items:stretch}
.acc-fy > select{flex:1}
.acc-day{display:flex; align-items:stretch; border:1px solid var(--rule); border-radius:10px; overflow:hidden}
.acc-day span{display:flex; align-items:center; padding:0 10px; background:var(--band); font-size:12.4px;
              color:var(--ink-soft); border-right:1px solid var(--rule); white-space:nowrap}
.acc-day select{border:0 !important; border-radius:0; min-width:70px}

/* ---- Settings code lists: a box that can be typed in looks like one ---- */
/* a row not yet saved: every box drawn, so it is plain where to type */
.acc-codes tr.acc-new input:not([readonly]){border-color:var(--rule); background:var(--card)}
.acc-codes tr.acc-new input::placeholder{color:var(--ink-faint)}
/* a saved row: the box shows itself as the pointer comes over it */
.acc-codes input:not([readonly]){cursor:text}
.acc-codes input:not([readonly]):hover{border-color:var(--rule); background:var(--card)}
.acc-codes input:not([readonly]):focus{border-color:var(--accent)}
/* a code already saved is fixed: no outline, however the pointer comes over it */
.acc-codes input[readonly]:hover{border-color:transparent}

/* ---- Numbering: the letters, the digits and where the series carries on ---- */
.acc-num .acc-pfx{width:110px}
.acc-num .acc-dig{width:90px}
.acc-num .acc-from{width:140px}
.acc-num td input{width:100%; border:1px solid var(--rule); background:var(--card)}
.acc-num td{vertical-align:middle}

/* ---- Currencies: a tick against each one the company uses ---- */
table.acc-codes.acc-cur :is(th, td).acc-use{width:70px; text-align:center; padding-left:0; padding-right:0}
.acc-cur td{vertical-align:middle}
.acc-cur input[type=checkbox]{width:16px; height:16px; accent-color:var(--accent); margin:0}
.acc-cur input[type=checkbox]:disabled{opacity:.55}

/* the rate is short; the Delete link sits in from the right edge, level with its row */
.acc-codes .acc-rate{width:92px}
/* named with the table and the cell, to outweigh the shared rule that sets cells' text to the start */
table.acc-codes :is(th, td).acc-del{width:80px; padding-left:0; padding-right:0; vertical-align:middle; text-align:center}
/* Delete stands about four-fifths of the way across, whatever the width of
   the window: the last fifth of the row is left empty (its line still runs
   across the box), and the description takes what lies between. */
.acc-codes .acc-fill{width:19%; padding:0}

/* ============================================================
   SIGNING IN, AND WHAT EACH ROLE SEES
   ============================================================ */

/* ---- the gate: the page AccSys opens on ----

   Light, as the software is. The ground the screens stand on, the logo at
   the top, and below it two halves: the work on the left, on cards of the
   software's own kind; the one thing to do on the right. A soft wash of the
   software's purple and blue sits behind the cards, so the page has depth
   without a slab of colour across half of it.

   Narrower than a laptop, the left half goes: what is left is the logo and
   the card, which is all that is needed to sign in. */
.accsys-gate{
  flex:1; position:relative; overflow:auto;
  display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);
  align-items:center; gap:40px; padding:0 clamp(24px, 5vw, 76px);
  background:var(--paper);
}
.accsys-gate[hidden]{display:none}
/* the wash: two lights, kept well back */
.accsys-gate::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 52% at 12% 14%, rgba(108,76,241,.14), transparent 70%),
    radial-gradient(46% 46% at 86% 88%, rgba(59,130,246,.12), transparent 72%);
}

/* ---- the left half: the software's own work ---- */
.acc-face{position:relative; z-index:1; padding:40px 0; max-width:620px}
.acc-facetop{margin-bottom:34px}
.acc-wordmark{
  /* the page is light, so the logo is the artwork as it is drawn */
  display:inline-block; width:135px; height:53px;
  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;
}
.acc-facemid h2{
  margin:0 0 12px; font-size:clamp(26px, 2.6vw, 34px); line-height:1.2; font-weight:700;
  letter-spacing:-.025em; color:var(--ink);
}
.acc-facemid > p{margin:0 0 30px; font-size:14.6px; line-height:1.65; color:var(--ink-soft); max-width:440px}

/* the work itself: an entry, and a figure from the Dashboard beside it */
.acc-showwrap{position:relative; max-width:480px}
.acc-show{
  background:var(--card); border:1px solid var(--rule); border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(17,24,39,.04), 0 26px 50px -24px rgba(17,24,39,.35);
}
.acc-showhead{
  display:flex; align-items:baseline; gap:9px; padding:13px 16px 11px; border-bottom:1px solid var(--rule-soft);
}
.acc-showref{font-size:12.8px; font-weight:700; color:var(--accent-ink)}
.acc-showdate{font-size:11.8px; color:var(--ink-faint)}
.acc-showpill{
  margin-left:auto; font-size:10.6px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--good); background:var(--good-soft); border-radius:999px; padding:3px 9px;
}
.acc-showtab{width:100%; border-collapse:collapse; font-size:12.6px; color:var(--ink)}
.acc-showtab th{
  text-align:left; padding:9px 16px; font-size:9.8px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; background:var(--band); border-bottom:1px solid var(--rule-soft);
}
.acc-showtab td{padding:10px 16px; border-bottom:1px solid var(--rule-soft); font-variant-numeric:tabular-nums}
.acc-showtab td b{color:var(--accent-ink); font-weight:700}
.acc-showtab .r{text-align:right}
.acc-showtab tfoot td{
  border-bottom:0; border-top:1px solid var(--rule); background:var(--brass-soft);
  font-weight:700; color:var(--ink-soft);
}
/* the figure, standing under the entry at its right-hand end.

   It floated over the entry's corner at first, which looked well until the
   window narrowed: outside the entry it reached across and sat under the
   sign-in card, and inside it covered the entry's own credit column. Below
   it, at every width, it collides with nothing and still reads as the
   figure belonging to the work above. */
.acc-tile{
  margin:14px 0 0 auto; max-width:200px; display:flex; flex-direction:column; gap:3px;
  background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:14px 18px;
  box-shadow:0 1px 2px rgba(17,24,39,.04), 0 18px 36px -18px rgba(17,24,39,.3);
}
.acc-tilelab{font-size:11.6px; color:var(--ink-faint); font-weight:500}
.acc-tilefig{font-size:19px; font-weight:700; letter-spacing:-.015em; color:var(--ink)}
.acc-tilesub{font-size:11.2px; color:var(--ink-faint)}
.acc-facefoot{margin-top:38px; font-size:11.8px; color:var(--ink-faint)}

/* ---- the right half: the one thing to do ---- */
.acc-pane{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; padding:40px 0}
.acc-gate{
  width:100%; max-width:416px; text-align:left; background:var(--card); border:1px solid var(--rule);
  border-radius:20px; box-shadow:0 1px 2px rgba(17,24,39,.04), 0 30px 60px -30px rgba(17,24,39,.32);
  padding:36px 34px 30px;
}
.acc-gate.acc-wide{max-width:460px}
.acc-gate h1{margin:0; font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--ink)}
.acc-gatesub{margin:8px 0 28px; font-size:13.6px; line-height:1.55; color:var(--ink-soft)}
.acc-gate label{display:block; font-size:12.6px; font-weight:600; color:var(--ink-soft); margin:0 0 6px}
.acc-gate input, .acc-gate select{
  width:100%; box-sizing:border-box; margin:0 0 16px; padding:11px 13px; font:inherit; font-size:13.6px;
  color:var(--ink); background:var(--card); border:1px solid var(--rule); border-radius:11px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.acc-gate input::placeholder{color:var(--ink-faint)}
.acc-gate input:hover, .acc-gate select:hover{border-color:#D8DCE6}
.acc-gate input:focus, .acc-gate select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
/* every word on the gate that acts is a plain purple word, not a button */
.acc-gate .msw-link, .acc-first .msw-link{
  font:inherit; font-size:12.6px; font-weight:600; border:0; background:none; padding:0;
  color:var(--accent); cursor:pointer;
}
.acc-gate .msw-link:hover, .acc-first .msw-link:hover{text-decoration:underline}
/* the label row where something sits at its end, such as "Forgot your password?" */
.acc-labrow{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.acc-labrow .msw-link{font-size:12.2px}
/* the box keeps the eye inside it, so the margin under it belongs to the
   wrapper and the eye sits on the box's own middle */
.acc-pw{position:relative; margin:0 0 16px}
.acc-pw input{padding-right:46px; margin:0}
.acc-eye{
  position:absolute; top:50%; transform:translateY(-50%); right:9px; width:30px; height:30px; padding:0; border:0; border-radius:8px;
  background:none; color:var(--ink-faint); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.acc-eye:hover{background:var(--band); color:var(--ink-soft)}
.acc-eye svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.acc-gate button[type=submit]{width:100%; margin-top:8px; padding:12px; font-size:13.6px}
.acc-gateerr{
  margin:0 0 16px; padding:11px 13px; border-radius:11px; font-size:12.8px; line-height:1.5;
  background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad);
}
.acc-gateerr[hidden]{display:none}
/* a word of help, in its own quiet box */
.acc-note{
  margin:0 0 16px; padding:11px 13px; border-radius:11px; font-size:12.6px; line-height:1.55;
  background:var(--accent-soft); color:var(--accent-ink); border:1px solid rgba(108,76,241,.22);
}
.acc-note[hidden]{display:none}
/* the hint under a box; only ever a box's own, never a line inside a list */
.acc-gate > form > small, .acc-gate > small{display:block; margin:-10px 0 14px; font-size:11.6px; color:var(--ink-faint)}

/* the companies this person may open */
.acc-colist{display:flex; flex-direction:column; gap:9px; margin-bottom:20px}
.acc-co{
  display:flex; align-items:center; gap:14px; width:100%; padding:13px 14px; text-align:left;
  background:var(--card); border:1px solid var(--rule); border-radius:12px; font:inherit; cursor:pointer;
  transition:border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.acc-co:hover{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 1px 2px rgba(17,24,39,.05)}
.acc-co .msw-logo{
  width:36px; height:36px; flex:none; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--blue));
}
.acc-co .msw-logo svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.5;
                      stroke-linecap:round; stroke-linejoin:round}
.acc-coname{display:flex; flex-direction:column; gap:2px; font-size:14px; font-weight:600; color:var(--ink)}
.acc-coname small{font-size:12px; font-weight:500; color:var(--ink-faint)}
.acc-out{width:100%}

/* ---- a shorter window: the work gives up what it can spare ---- */
@media (max-height:820px){
  .acc-face{padding:28px 0}
  .acc-facetop{margin-bottom:26px}
  .acc-facemid > p{margin-bottom:24px}
  .acc-facefoot{margin-top:26px}
}
@media (max-height:680px){
  .acc-facemid > p{display:none}
  .acc-facefoot{display:none}
}

/* ---- narrower than a laptop: the card, and the logo above it ---- */
@media (max-width:980px){
  /* one column, and the rows keep their own height: left to stretch, the two
     of them would share the window and leave a hole between logo and card */
  .accsys-gate{grid-template-columns:1fr; align-items:start; align-content:start; padding:0 20px; gap:0}
  .acc-face{max-width:none; padding:26px 0 0}
  .acc-facemid, .acc-facefoot{display:none}
  .acc-facetop{margin-bottom:22px}
  .acc-pane{padding:0 0 40px; justify-content:flex-start}
  .acc-gate{max-width:460px}
}

/* ---- the badge's own menu ---- */
.acc-whomenu{
  position:fixed; z-index:60; min-width:240px; padding:8px;
  background:var(--card); border:1px solid var(--rule); border-radius:14px;
  box-shadow:0 18px 40px -12px rgba(17,24,39,.22);
  font-family:"Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}
.acc-whohead{display:flex; flex-direction:column; gap:2px; padding:10px 12px 12px; border-bottom:1px solid var(--rule); margin-bottom:6px}
.acc-whohead b{font-size:13.4px; color:var(--ink)}
.acc-whohead span{font-size:12px; color:var(--ink-faint)}
.acc-whorole{color:var(--accent-ink) !important; font-weight:600}
.acc-whomenu button{
  display:block; width:100%; text-align:left; padding:8px 12px; border:0; border-radius:10px;
  background:none; font:inherit; font-size:13px; color:var(--ink); cursor:pointer;
}
.acc-whomenu button:hover{background:var(--band)}

/* ---- changing your own password ---- */
.acc-pwback{position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
            background:rgba(17,24,39,.35); font-family:"Plus Jakarta Sans", "Inter", system-ui, sans-serif}
.acc-pwbox{width:100%; max-width:360px; background:var(--card); border-radius:16px; padding:24px;
           box-shadow:0 24px 60px -12px rgba(17,24,39,.3)}
.acc-pwbox h2{margin:0 0 16px; font-size:18px; font-weight:700}
.acc-pwbox label{display:block; font-size:12.6px; font-weight:600; color:var(--ink-soft); margin:0 0 5px}
.acc-pwbox input{width:100%; box-sizing:border-box; margin:0 0 12px; padding:9px 12px; font:inherit; font-size:13.4px;
                 border:1px solid var(--rule); border-radius:10px; background:var(--card); color:var(--ink)}
.acc-pwbox input:focus{outline:3px solid var(--ring); outline-offset:0; border-color:var(--accent)}
.acc-pwbox small{display:block; margin:-8px 0 12px; font-size:11.5px; color:var(--ink-faint)}
.acc-pwacts{display:flex; gap:8px; justify-content:flex-end; margin-top:4px}
.acc-pwdone{position:fixed; z-index:70; left:50%; transform:translateX(-50%); bottom:24px;
            padding:10px 16px; border-radius:10px; background:var(--good-soft); color:var(--good);
            border:1px solid var(--good); font-size:13px;
            font-family:"Plus Jakarta Sans", "Inter", system-ui, sans-serif}

/* ---- a Viewer: the screens do not offer what the server would refuse ----
   Everything that makes or changes an entry is a "go" button (New Invoice,
   Save, Post, Apply) or a "bad" one (Delete). A Viewer sees neither, nor the
   + New menu in the bar. This is politeness, not protection: the server
   refuses the request whatever the screen shows. */
body[data-role="viewer"] :is(#msw-app, #msw-pop) :is(.msw-btn.go, .msw-btn.bad, .msw-rbtn.go),
body[data-role="viewer"] #msw-app .msw-newwrap,
body[data-role="viewer"] :is(#msw-app, #msw-pop) :is(.msw-popedit, .msw-jnledit, .msw-issedit, .msw-partedit),
body[data-role="viewer"] :is(#msw-app, #msw-pop) .msw-link:is([data-accdel], [data-projdel], [data-custdel], [data-suppdel]){
  display:none !important;
}

/* the way in for somebody whose account was just made for them */
.acc-first{margin:14px 0 0; text-align:center; font-size:12.6px; color:var(--ink-soft)}
.acc-first .msw-link{font:inherit; border:0; background:none; padding:0; color:var(--accent);
                     font-weight:600; cursor:pointer}
.acc-first .msw-link:hover{text-decoration:underline}

/* ---- Users and Permissions: who may open this company ---- */
table.acc-codes.acc-users :is(th, td).acc-role{width:190px}
table.acc-codes.acc-users :is(th, td).acc-waiting{width:190px}
.acc-users td{vertical-align:middle}
.acc-users select{width:100%; border:1px solid var(--rule); background:var(--card); border-radius:8px;
                  padding:6px 8px; font:inherit; font-size:12.8px; color:var(--ink)}
.acc-users .msw-pill.warn{background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn)}
.acc-addwho{max-width:520px; box-shadow:none !important; border:0 !important; padding:16px !important}
.acc-addwho select{width:100%; border:1px solid var(--rule); background:var(--card); border-radius:10px;
                   padding:8px 9px; font:inherit; font-size:13px; color:var(--ink)}
.acc-addwho .msw-f{margin-bottom:14px}
.acc-addact{margin-top:4px}
.acc-addnote{margin:12px 0 0; font-size:12.2px; max-width:480px}
.acc-rolehelp{padding:14px 16px}
.acc-rolehelp p{margin:0 0 8px; font-size:13px; color:var(--ink-soft)}
.acc-rolehelp p:last-child{margin-bottom:0}
.acc-rolehelp b{color:var(--ink)}

/* ---- setting up another company, from the list of companies ---- */
.acc-conew{border-style:dashed}
.acc-conew:hover{border-style:solid}
.acc-coplus{
  width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:11px; background:var(--accent-soft); color:var(--accent); font-size:20px; font-weight:600;
}
.acc-corow{display:flex; gap:12px}
.acc-corow > div{flex:1; min-width:0}
/* only the day beside the month is a narrow box; the two on the row above
   share the width evenly, so the date box is not squeezed */
.acc-corow:has(#acc-coday) > div:last-child{flex:0 0 96px}
.acc-gate select{
  width:100%; box-sizing:border-box; margin:0 0 14px; padding:9px 12px; font:inherit; font-size:13.4px;
  color:var(--ink); background:var(--card); border:1px solid var(--rule); border-radius:10px;
}
.acc-gate select:focus{outline:3px solid var(--ring); outline-offset:0; border-color:var(--accent)}