/* ============================================================
   THE LOOK'S FINISH -- shared by AccSys and the course.

   Loaded after msw.css. The colours and the type are in msw-base.css;
   this file gives the screens their rounded, light finish: a white top
   bar and menu, the chosen menu row in soft purple, pill tabs, rounded
   buttons, boxes, cards and tables with a soft shadow, and a purple ring
   on the box being typed in. It changes how things look, never what is
   on a screen or in what order.

   Every rule is named from the software's own containers (#msw-app,
   #msw-pop, #msw-ask), so it outweighs msw.css and the page around it
   without either having to change. A product's own file, loaded after
   this one, can still set its own frame.
   ============================================================ */

/* ---- the type ---- */
#msw-app .msw-head h4{font-size:21px; font-weight:700; letter-spacing:-.015em}
#msw-app .msw-head p{font-size:12.8px; color:var(--ink-faint)}

/* ---- the frame ---- */
#msw-app > .msw-app{border-radius:14px; border-color:var(--rule)}

/* ---- the bar across the top: white, a line beneath ---- */
#msw-app .msw-top{
  background:var(--msw-nav); color:var(--ink); border-bottom:1px solid var(--rule);
  padding:12px 20px; gap:14px;
}
#msw-app .msw-brand{color:var(--ink); font-weight:700; font-size:14.5px}
/* The wordmark has a fixed room, so the search box always starts in the same
   place: straight above each screen's title. That is the menu's width (232px)
   and the screen's own left padding (28px), less the bar's padding (20px) and
   the gap after the wordmark (14px). */
#msw-app .msw-brand{flex:0 0 calc(232px + 28px - 20px - 14px); min-width:0}
@media (max-width:900px){ #msw-app .msw-brand{flex:0 1 auto} }
#msw-app .msw-logo{
  width:30px; height:30px; border-radius:9px; font-size:13px;
  background:linear-gradient(135deg, var(--accent), var(--blue));
}
#msw-app .msw-logo svg{width:19px; height:19px; fill:none; stroke:#fff; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}
#msw-app .msw-search{max-width:460px}
#msw-app .msw-search input{
  background:var(--band); color:var(--ink); border:1px solid var(--rule);
  border-radius:999px; padding:8px 16px 8px 36px; font-size:12.8px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='5' fill='none' stroke='%238A92A3' stroke-width='1.6'/><path d='M11 11l3.5 3.5' stroke='%238A92A3' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:14px center; background-size:14px 14px;
}
#msw-app .msw-search input:focus{background-color:var(--card)}
#msw-app .msw-found{border-radius:14px; padding:8px; box-shadow:0 18px 40px -12px rgba(17,24,39,.22)}
#msw-app .msw-fitem{border-radius:10px; padding:8px 12px}
#msw-app .msw-fhead{padding:10px 12px 4px}
#msw-app .msw-newmenu{border-radius:14px; padding:8px; box-shadow:0 18px 40px -12px rgba(17,24,39,.22)}
#msw-app .msw-nitem{border-radius:10px; padding:8px 12px; font-size:13px}
#msw-app .msw-nhead{padding:10px 12px 4px}
/* + New and the user's initials keep to the right-hand end, however wide the window */
#msw-app .msw-newwrap{margin-left:auto}
#msw-app .msw-new{
  border-radius:10px; padding:8px 16px; font-size:13px;
  background:var(--accent); box-shadow:0 4px 12px -4px var(--glow);
}
#msw-app .msw-new:hover{background:var(--accent-hover)}
#msw-app .msw-who{
  width:34px; height:34px; background:linear-gradient(135deg, #F59E0B, #EC4899);
  border:2px solid var(--card); box-shadow:0 0 0 1px var(--rule); color:#fff; font-size:12px;
}

/* ---- the side menu: white, rounded rows, the chosen one in soft purple ---- */
#msw-app .msw-main{grid-template-columns:232px 1fr}
#msw-app .msw-side{background:var(--msw-nav); border-right:1px solid var(--rule); padding:12px 12px 18px}
#msw-app .msw-item{
  border-left:0; border-radius:10px; padding:9px 12px; margin:1px 0;
  font-size:13.4px; color:var(--msw-nav-ink); font-weight:500;
}
#msw-app .msw-item .msw-ic{opacity:1; color:var(--ink-faint)}
#msw-app .msw-item.on{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
#msw-app .msw-item.on .msw-ic{color:var(--accent)}
#msw-app .msw-item.msw-sub{background:none; padding-left:52px; font-size:13px}
#msw-app .msw-item.msw-sub.on{background:var(--accent-soft); color:var(--accent-ink)}
#msw-app :is(.msw-item, .msw-item.on, .msw-item.msw-sub, .msw-item.msw-sub.on):hover{background:var(--band); color:var(--ink)}
#msw-app :is(.msw-item.on, .msw-item.msw-sub.on):hover{background:var(--accent-soft); color:var(--accent-ink)}
/* the company above each screen's title: its mark a size up from the bar's */
#msw-app .msw-cohead .msw-logo{width:34px; height:34px; border-radius:10px; box-shadow:0 4px 12px -4px var(--glow)}
#msw-app .msw-cohead .msw-logo svg{width:20px; height:20px}
#msw-app .msw-sidelab{padding:16px 12px 6px; font-size:11px; letter-spacing:.08em; color:var(--msw-nav-label)}
#msw-app .msw-screen{padding:24px 28px 32px}

/* ---- narrow screens: the menu is a strip along the top, as before ---- */
@media (max-width:900px){
  #msw-app .msw-main{grid-template-columns:1fr}
  #msw-app .msw-side{border-right:0; border-bottom:1px solid var(--rule); padding:6px 8px}
  #msw-app .msw-item{width:auto; border-bottom:0; margin:0 2px}
  #msw-app .msw-item.msw-sub{padding-left:12px}
  #msw-app .msw-screen{padding:18px 16px 24px}
}

/* ---- tabs: pills ---- */
#msw-app .msw-tabs{
  display:inline-flex; gap:4px; padding:4px; margin-bottom:18px; max-width:100%;
  background:var(--card); border:1px solid var(--rule); border-radius:999px;
}
#msw-app .msw-tab{border-bottom:0; border-radius:999px; padding:7px 16px; font-size:13px; font-weight:500; color:var(--ink-soft)}
#msw-app .msw-tab:hover{color:var(--ink); background:var(--band)}
#msw-app .msw-tab.on{background:var(--accent); color:#fff; font-weight:600}

/* ---- buttons: rounded, purple for the main action ---- */
:is(#msw-app, #msw-pop, #msw-ask) :is(.msw-btn, .msw-rbtn, .msw-fullbtn){
  border-radius:10px; padding:7px 15px; font-size:13px; font-weight:600;
  background:var(--card); color:var(--ink); border:1px solid var(--rule);
  box-shadow:0 1px 2px rgba(17,24,39,.05);
}
:is(#msw-app, #msw-pop, #msw-ask) :is(.msw-btn, .msw-rbtn).go{
  background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 12px -4px var(--glow);
}
:is(#msw-app, #msw-pop, #msw-ask) :is(.msw-btn, .msw-rbtn).go:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
:is(#msw-app, #msw-pop, #msw-ask) :is(.msw-btn, .msw-rbtn, .msw-fullbtn):not(.go):hover{background:var(--band); border-color:var(--rule); color:var(--ink)}
:is(#msw-app, #msw-pop, #msw-ask) .msw-btn.ghost{background:none; box-shadow:none}
:is(#msw-app, #msw-pop, #msw-ask) .msw-popacts .msw-btn.bad{color:var(--bad)}
:is(#msw-app, #msw-pop, #msw-ask) .msw-popacts .msw-btn.bad:hover{border-color:var(--bad); background:var(--bad-soft)}
:is(#msw-app, #msw-pop, #msw-ask) .msw-pick{border-radius:10px; padding:7px 26px 7px 12px; font-size:12.8px}

/* ---- cards and boxes: white, rounded, a soft shadow ---- */
#msw-app :is(.msw-card, .msw-box, .msw-form){border-radius:12px; box-shadow:var(--shadow)}
#msw-app .msw-card{padding:16px 18px}
#msw-app .msw-cards{gap:16px; margin-bottom:20px}
#msw-app .msw-card .lab{letter-spacing:.02em; text-transform:none; font-size:12.6px; font-weight:500}
#msw-app .msw-card .fig{font-size:24px; font-weight:700}
/* the two rows of panels share their gap, so a month on the cash line stands
   under the same month's bars */
#msw-app :is(.msw-split, .msw-cashrow){gap:16px}
#msw-app .msw-boxhead{padding:13px 16px; font-size:13.6px; font-weight:700}
#msw-app .msw-form{padding:20px}

/* ---- tables ---- */
:is(#msw-app, #msw-pop) .msw-tw{border-radius:12px}
:is(#msw-app, #msw-pop) .msw-tab2{font-size:13px}
:is(#msw-app, #msw-pop) .msw-tab2 th{font-size:11px; letter-spacing:.06em; padding:11px 14px}
:is(#msw-app, #msw-pop) .msw-tab2 td{padding:12px 14px}
:is(#msw-app, #msw-pop) .msw-tab2 tbody tr:hover{background:var(--row-hover)}
:is(#msw-app, #msw-pop) .msw-lines th{padding:9px 8px; font-size:11px}
:is(#msw-app, #msw-pop) .msw-pill{border-radius:999px; padding:3px 10px; font-size:11px}

/* ---- boxes to type in: rounded, a soft purple ring when in use ---- */
:is(#msw-app, #msw-pop, #msw-ask) :is(
  .msw-f input, .msw-f select, .msw-addr textarea, .msw-tc > textarea,
  .msw-sbox > input, .msw-sbox > .msw-date > input, .msw-sbox > textarea,
  .msw-find input, .msw-asat .msw-date > input){
  border-radius:10px; padding-top:8px; padding-bottom:8px;
}
:is(#msw-app, #msw-pop, #msw-ask) .msw-igroup{border-radius:10px}
:is(#msw-app, #msw-pop, #msw-ask) .msw-lines :is(input, select, textarea){border-radius:8px}
:is(#msw-app, #msw-pop, #msw-ask) :is(input, select, textarea):focus:not(.msw-igroup > *),
:is(#msw-app, #msw-pop, #msw-ask) .msw-igroup:focus-within{outline:3px solid var(--ring); outline-offset:0; border-color:var(--accent)}
:is(#msw-app, #msw-pop, #msw-ask) :is(.msw-f label, .msw-srow > label, .msw-tc > label){
  text-transform:none; letter-spacing:0; font-size:12.6px; font-weight:600; color:var(--ink-soft)
}
:is(#msw-app, #msw-pop, #msw-ask) :is(.msw-f, .msw-srow) > label.msw-must, :is(#msw-app, #msw-pop, #msw-ask) .msw-f label.msw-must{color:var(--bad)}

/* ---- pop-ups, pickers and calendars: rounder, softer ---- */
:is(#msw-pop, #msw-ask) :is(.msw-popbox, .msw-askbox){border-radius:16px; box-shadow:0 24px 60px -12px rgba(17,24,39,.3)}
#msw-pop .msw-pophead{border-radius:16px 16px 0 0; padding:16px 20px}
:is(#msw-app, #msw-pop, #msw-ask) :is(.msw-cbopt, .msw-ddopt, .msw-calday){border-radius:8px}
:is(#msw-app, #msw-pop, #msw-ask) :is(.msw-pagebox, .msw-pagebtn){border-radius:999px}

/* ============================================================
   THE FINISH, GONE OVER

   Colour, weight and shadow only: no size, no spacing, no type, and
   nothing on any screen moves. Everything below is drawn from the
   palette already in msw-base.css.
   ============================================================ */

/* ---- the filter chips: the software's own purple ----
   They carry what a screen is showing -- the period, the currency, which
   status -- and they act, so they take the colour everything that acts
   takes. Closed, the chip is the purple laid on softly, with its words and
   its chevron in the deeper purple; opened, it is the purple itself, as the
   buttons are, so the one being used stands out from the rest of the row. */
:is(#msw-app, #msw-pop) .msw-pick{
  color:var(--accent-ink); background-color:var(--accent-soft); border-color:rgba(108,76,241,.22);
  box-shadow:0 1px 2px rgba(17,24,39,.04);
  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='%235B3DE0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-size:9px 5px; background-position:right 11px center;
  transition:background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
:is(#msw-app, #msw-pop) .msw-pick b{color:var(--accent-ink); font-weight:700}
:is(#msw-app, #msw-pop) .msw-pick:hover{border-color:var(--accent)}
/* open: the chip belongs to the panel under it, and wears the full purple */
:is(#msw-app, #msw-pop) .msw-dd.open .msw-pick{
  background-color:var(--accent); border-color:var(--accent); color:#EDE7FF;
  box-shadow:0 4px 12px -4px var(--glow), 0 0 0 3px var(--ring);
  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='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
:is(#msw-app, #msw-pop) .msw-dd.open .msw-pick b{color:#fff}
:is(#msw-app, #msw-pop) .msw-pick:focus-visible{outline:3px solid var(--ring); outline-offset:0; border-color:var(--accent)}

/* the panel a chip opens: the same rounded, lifted panel as the menus in
   the top bar, so every panel in the software is the same thing */
:is(#msw-app, #msw-pop) .msw-ddmenu{
  border-radius:14px; padding:8px; box-shadow:0 18px 40px -12px rgba(17,24,39,.22);
}
:is(#msw-app, #msw-pop) .msw-ddopt{border-radius:9px; padding:8px 11px}
:is(#msw-app, #msw-pop) .msw-ddopt.on{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}

/* ---- tables: the figures line up, the headings sit on their own ground ---- */
:is(#msw-app, #msw-pop) .msw-tab2 th{background:var(--band); color:var(--ink-faint)}
:is(#msw-app, #msw-pop) .msw-tab2 td.r, :is(#msw-app, #msw-pop) .msw-lines td.r,
:is(#msw-app, #msw-pop) .msw-tab2 td.msw-calc{font-variant-numeric:tabular-nums}
/* a row that sums the ones above it -- brought forward, totals, carried
   forward -- reads as the ledger's own furniture, not as another entry */
#msw-pop .msw-tab2 tbody tr:has(> td > b){background:var(--brass-soft)}
#msw-pop .msw-tab2 tbody tr:has(> td > b):hover{background:var(--brass-soft)}

/* ---- every tick box in the software takes the software's purple ---- */
:is(#msw-app, #msw-pop, #msw-ask) input[type=checkbox]{accent-color:var(--accent)}

/* ---- buttons: the same quiet lift, and a press that is felt ---- */
:is(#msw-app, #msw-pop, #msw-ask) :is(.msw-btn, .msw-rbtn, .msw-fullbtn, .msw-pagebtn){
  transition:background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
:is(#msw-app, #msw-pop, #msw-ask) :is(.msw-btn, .msw-rbtn):active{transform:translateY(.5px)}
:is(#msw-app, #msw-pop, #msw-ask) :is(.msw-btn, .msw-rbtn, .msw-tab, .msw-item, .msw-pagebtn):focus-visible{
  outline:3px solid var(--ring); outline-offset:1px;
}

/* ---- the layer a window opens over: deeper, and the page behind it soft ---- */
:is(#msw-pop, #msw-ask){backdrop-filter:blur(2px)}

/* ---- the window itself: a head that reads as a head ---- */
#msw-pop .msw-pophead{background:var(--card); border-bottom-color:var(--rule)}
#msw-pop .msw-popx{border-radius:9px; transition:background-color .12s ease, color .12s ease}

/* ---- a document's facts: the label quiet, the figure the ink ---- */
:is(#msw-app, #msw-pop) .msw-facts > div > span:first-child{color:var(--ink-faint)}
:is(#msw-app, #msw-pop) .msw-facts b{color:var(--ink)}

/* ---- lists: the line between rows softer, the row under the pointer clearer ---- */
:is(#msw-app, #msw-pop) .msw-tab2 td{border-bottom-color:var(--rule-soft)}
:is(#msw-app, #msw-pop) .msw-tab2 tbody tr{transition:background-color .1s ease}

/* ---- what the software scrolls, scrolled quietly ---- */
:is(#msw-app, #msw-pop) *::-webkit-scrollbar{width:11px; height:11px}
:is(#msw-app, #msw-pop) *::-webkit-scrollbar-thumb{
  background:var(--rule); border-radius:999px; border:3px solid transparent; background-clip:content-box;
}
:is(#msw-app, #msw-pop) *::-webkit-scrollbar-thumb:hover{background:#D3D8E2; background-clip:content-box}
:is(#msw-app, #msw-pop) *::-webkit-scrollbar-track{background:transparent}