/* Market OS portals — loaded after app.css on /vendor/ and /staff/ only. */

/* Sections and sample accounts are hidden only when the script can show them again (contract 2.6). */
[hidden]{display:none !important}
html.js [data-off],html.js [data-pane].hidden,html.js [data-acctpane].hidden{display:none}
html:not(.js) [data-acctpane]{margin-bottom:3rem;padding-bottom:2rem;border-bottom:2px solid var(--line)}
html:not(.js) [data-pane]{margin-bottom:2.4rem}
/* A page opened from the guide stays at its top, where the tour link is: while it loads, portal.js sets this
   class and the browser's jump to the section named in the address ends at the top of the page. */
html.arrive [data-pane],html.arrive [data-acctpane]{scroll-margin-top:100000px}

/* demo bar (ruling G5): the portal's name and the whole sentence on a wide screen, one short line on a phone,
   where the header under it names the portal. Both halves of the rule are here, so the portal bar does not
   depend on what the public stylesheet does with the same two spans. */
body.portal .demobar .demoshort{display:none}
.demobar .nb{white-space:nowrap}
/* the banner link is in the markup so that a page opened from the guide has its tour link at once (contract 2.9);
   until app.js makes it one, it is not shown: outside a tour the portals carry no link to the guide */
body.portal .demobar a.demowhat:not(.tour){display:none}

.pnav{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.pnav a{padding:.5rem .7rem;border-radius:8px;text-decoration:none;color:var(--ink2);font-size:.93rem}
.pnav a:hover{background:#F0EDE3;color:var(--ink)}
.pnav a.lang{border:1px solid var(--line)}
.hero.tight{padding-bottom:.6rem}
section.flush{padding-top:0;padding-bottom:2rem}

.switcher{margin:.8rem 0 1rem}
.switcher .tabs{display:flex;gap:.45rem;flex-wrap:wrap}
.switcher a{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-height:44px;font-size:.9rem;padding:.45rem .8rem;
  border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none}
.switcher a:hover{background:#F3F1E9}
.switcher a[aria-current]{border-color:var(--green-d);box-shadow:inset 0 0 0 1px var(--green-d);background:var(--okbg)}
[data-acctpane]>h2{margin:.2rem 0 .1rem}
[data-acctpane]>.meta{margin-bottom:.9rem;color:var(--ink2)}

.app{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0;min-height:70vh}
.side{border-right:1px solid var(--line);background:#F5F2EA;padding:1rem .7rem}
.side a{display:flex;align-items:center;min-height:40px;text-decoration:none;font-size:.93rem;padding:.4rem .7rem;border-radius:9px;
  color:var(--ink2);overflow-wrap:anywhere}
.side a:hover{background:#EAE6DA}
.side a[aria-current]{background:#fff;color:var(--green-d);font-weight:700;box-shadow:var(--shadow)}
.allsec{display:none}
.pane{padding:1.4rem 1.4rem 2.4rem;min-width:0;container-type:inline-size}
.ph{margin-top:0;font-size:clamp(1.5rem,3.4vw,2.1rem);overflow-wrap:anywhere}
.pane h3:not(.ph),.pane h4{margin-top:1.6rem}
.pane h3.first{margin-top:.4rem}
.pane h4{font-size:1.1rem}
.tosec{display:none;margin:1.8rem 0 0;font-size:.9rem}
html:not(.js) .tosec{display:block}
.asof{display:inline-block;font-size:.8rem;line-height:1.45;color:var(--ink2);background:#F3F1E9;border:1px dashed #CFC9B8;
  border-radius:8px;padding:.3rem .6rem;margin:.2rem 0 .6rem}
/* the publishing rule: one sentence on screen, the formula folded under it (F1-05) */
.meta.rule{color:var(--ink2)}
details.rule{margin:0}
details.rule>summary{display:inline-flex;align-items:center;min-height:40px;cursor:pointer;font-size:.85rem;color:var(--green-d);
  text-decoration:underline;list-style:none}
details.rule>summary::-webkit-details-marker{display:none}
/* the + / – sits in a span the accessibility tree does not read, so it is not part of the summary's name (Z3-13) */
details.rule>summary>.mk{margin-left:.3rem}
details.rule>summary>.mk::after{content:"+"}
details.rule[open]>summary>.mk::after{content:"–"}
details.rule>.meta{color:var(--ink2);margin:.1rem 0 .4rem;max-width:80ch}
.pane>section>details.rule{margin-bottom:1rem}

.pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.18rem .5rem;border-radius:6px;background:#EFEBE0;color:var(--ink2)}
.pill.ok{background:#E4F1E8;color:#1B5C3B}.pill.warn{background:#FBEEDA;color:#7A4F00}
.pill.bad{background:#F7E1DE;color:#8C3A2E}.pill.info{background:#E7EFF5;color:#255C77}
.tag{display:inline-block;font-size:.74rem;color:var(--ink2);background:#F1EFE7;border:1px solid var(--line);
  border-radius:6px;padding:0 .35rem;white-space:nowrap}
.banner{border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.2rem;border:1px solid}
.banner.live{background:#E9F3EC;border-color:#BEDCC8}
.banner.dark{background:#FAF0EC;border-color:#EAD2C9}
.banner h3{margin:0 0 .3rem}
.banner p{margin:.35rem 0 0;font-size:.94rem}
.banner .meta{color:var(--ink2)}
.bdates span+span::before{content:", "}

.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.kpi.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi .fact{font-size:.85rem;color:var(--ink2)}
.kpi .fact b{font-size:.7rem}
.kpi .n{font-family:var(--serif);font-size:1.7rem;display:block;line-height:1.1;color:var(--ink)}
.alerts{padding-left:1.15rem;margin:.4rem 0 1.2rem}
.alerts li{margin:.3rem 0}
.alerts a{color:var(--ink)}

.rowbtns{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.rowbtns.solo{margin:1rem 0 0}
.rowbtns button{font:inherit;font-size:.85rem;min-height:40px;padding:.34rem .7rem;border-radius:8px;border:1px solid var(--line);
  background:#fff;cursor:pointer;color:var(--ink2)}
.rowbtns button:hover{background:#F3F1E9}
.rowbtns button.pri{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.rowbtns button.pri:hover{background:var(--green-d)}
.rowbtns button[aria-disabled="true"],.rowbtns button[aria-disabled="true"]:hover{background:#F3F1E9;border:1px dashed #BDB7A6;
  color:var(--ink2);font-weight:400;cursor:default}
.simout{font-size:.88rem;line-height:1.5;color:var(--green-d);background:var(--okbg);border:1px solid #CDE3D5;border-radius:9px;
  padding:.5rem .7rem;margin-top:.6rem}
.simout:empty{display:none}
.simout.need{color:#7A4F00;background:#FBEEDA;border-color:#EBD9AE}

/* column one of every portal table is a row header; it reads as a cell, not as a column head */
table.data tbody th{background:none;font-size:inherit;letter-spacing:0;text-transform:none;color:inherit;font-weight:600}
table.data tr:last-child th{border-bottom:0}
table.data td .meta,table.data th .meta{font-weight:400}
table.data tbody th{min-width:9.5rem}
table.data tbody th time,table.data .rowbtns button{white-space:nowrap}
table.data td .rowbtns{margin-top:.5rem}
table.data td>.rowbtns:first-child{margin-top:0}

.form.wide{max-width:none}
.flabel{font-weight:600;font-size:.93rem;margin:0 0 .3rem}
.field.check{display:flex;gap:.55rem;align-items:flex-start}
.field.check input{width:1.5rem;height:1.5rem;margin:.1rem 0 0;flex:none;accent-color:var(--green)}
.field.check label{margin:0;font-weight:400}
.field.check+.hint{margin:-.5rem 0 .9rem 2.05rem}
.gatenote{margin:0 0 .9rem;color:var(--ink2)}
.tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}

/* disclosures that read as buttons: Add a vendor, Paste a list, New application, Later dates */
.discrow{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-start;margin-bottom:.4rem}
.discrow details[open]{flex:1 1 100%}
details.disc{margin-bottom:.9rem}
details.disc>summary{display:inline-block;list-style:none;cursor:pointer;font-size:.9rem;font-weight:600;min-height:40px;
  padding:.5rem .9rem;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink2)}
details.disc>summary::-webkit-details-marker{display:none}
details.disc>summary>.mk::before{content:"+ "}
details.disc[open]>summary>.mk::before{content:"– "}
details.disc>summary:hover{background:#F3F1E9}
details.disc>summary.pri{background:var(--green);border-color:var(--green);color:#fff}
details.disc>summary.pri:hover{background:var(--green-d)}
details.disc[open]>summary{margin-bottom:.8rem}
.mock{font-size:.88rem;line-height:1.55;color:var(--ink2);background:#EEF4F8;border:1px solid #CBDDE8;border-radius:10px;
  padding:.6rem .8rem;margin:0 0 1rem}
.added{background:var(--okbg);border:1px solid #CDE3D5;border-radius:10px;padding:.6rem .8rem;font-size:.92rem}
p.note{margin:1rem 0}

.lucards{margin:.6rem 0 1.4rem}
.lucards .card h4{margin:0;font-size:1.08rem}
.lucards .card .meta{color:var(--ink2)}
.lucards .card.clash{border-color:#C9897D;box-shadow:inset 0 0 0 2px #E9C4BC}
.lucards .chips{align-items:center}

/* the day-close count (S6-08) */
.closesum{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin-top:1rem;max-width:34rem}
.closesum h4{margin:0 0 .4rem}
.closesum dl{margin:0}
.closesum dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;border-top:1px solid var(--line);font-size:.92rem}
.closesum dt{color:var(--ink2)}
.closesum dd{margin:0;font-weight:600;text-align:right}
.rowbtns.toprint{margin:0 0 1rem}
html:not(.js) .toprint{display:none}
/* the market-day sheet exists for paper only (S6-15) */
.sheet{display:none}

details.wikip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 1.1rem;margin-bottom:.6rem}
details.wikip>summary{cursor:pointer;padding:.75rem 0;list-style-position:outside;margin-left:1rem}
.wt{font-family:var(--serif);font-size:1.12rem;font-weight:600;margin-right:.4rem}
.wikip pre{white-space:pre-wrap;font:inherit;margin:0 0 1rem;color:var(--ink2)}

@media (max-width:820px){
  /* the portal header does not stick on a phone, so an opened section starts at the top of the screen */
  body.portal header.site{position:static}
  html{scroll-padding-top:1rem}
  .hrow{padding:.4rem 0}
  body.portal .demobar .demolong{display:none}
  body.portal .demobar .demoshort{display:inline}
  body.portal .demobar{text-wrap:balance}
  .app{grid-template-columns:minmax(0,1fr);min-height:0}
  /* a vendor's five sections stay on screen: a two-column grid of links */
  .side,.strip .tabs{border-right:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}
  .side{border-bottom:1px solid var(--line);padding:.7rem;border-radius:12px}
  .side a{min-height:44px;background:#FBF8F1;border:1px solid var(--line)}
  .side.strip{display:block}
  /* the five sample accounts are one to a line when their list is open, and without the script */
  .switcher{margin:.6rem 0 .2rem}
  .switcher .tabs{grid-template-columns:minmax(0,1fr)}
  /* the staff portal has thirteen: one strip that scrolls sideways, the dashboard first, so the section's own
     content starts on the first screen; "All sections" opens the grid, and a faded edge says there is more (F1-09) */
  html.js .strip{display:flex;flex-wrap:wrap;gap:.35rem;padding:.5rem}
  html.js .allsec{display:inline-flex;align-items:center;flex:none;min-height:44px;font:inherit;font-size:.9rem;font-weight:600;
    padding:.4rem .7rem;border-radius:9px;border:1px solid var(--green-d);background:#fff;color:var(--green-d);cursor:pointer}
  html.js .allsec::after{content:"▾";margin-left:.4rem}
  html.js .allsec[aria-expanded="true"]::after{content:"▴"}
  html.js .strip .tabs{position:relative;display:flex;flex:1 1 0;min-width:0;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.2rem),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 2.2rem),transparent)}
  html.js .strip .tabs.moved{-webkit-mask-image:linear-gradient(to right,transparent,#000 1.8rem,#000 calc(100% - 2.2rem),transparent);
    mask-image:linear-gradient(to right,transparent,#000 1.8rem,#000 calc(100% - 2.2rem),transparent)}
  html.js .strip .tabs::-webkit-scrollbar{display:none}
  html.js .strip .tabs::after{content:"";flex:0 0 2rem}
  html.js .strip .tabs a{flex:none;white-space:nowrap}
  html.js .strip.open .tabs,html.js .strip.open .tabs.moved{display:grid;flex:1 1 100%;overflow:visible;-webkit-mask-image:none;mask-image:none}
  html.js .strip.open .tabs::after{content:none}
  html.js .strip.open .tabs a{white-space:normal}
  /* the vendor portal's accounts fold the same way (Round 3): in the strip an account is its name over its
     state, so the open one sits whole beside "All 5" and the account itself starts on the first screen */
  html.js .switcher.strip{padding:0}
  html.js .switcher.strip:not(.open) .tabs{flex-wrap:nowrap;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1rem),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 1rem),transparent)}
  html.js .switcher.strip:not(.open) .tabs.moved{-webkit-mask-image:linear-gradient(to right,transparent,#000 .6rem,#000 calc(100% - 1rem),transparent);
    mask-image:linear-gradient(to right,transparent,#000 .6rem,#000 calc(100% - 1rem),transparent)}
  html.js .switcher.strip:not(.open) .tabs a{flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;
    max-width:calc(100% - 1.7rem)}
  html.js .switcher.strip:not(.open) .tabs .pill{white-space:normal}
  body.portal .hero{padding-top:1rem;padding-bottom:.6rem}
  body.portal .hero h1{margin-bottom:.2rem}
  body.portal .hero .lede{font-size:1rem;margin-bottom:.3rem}
  [data-acctpane]>.meta{margin-bottom:.6rem}
  .pane{padding:1.2rem 0 2rem}
  .tosec{display:block}
  .kpi,.kpi.k5,.lucards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tr{grid-template-columns:minmax(0,1fr)}
}
/* A stacked table is one card per row whenever its pane is too narrow for columns — on a phone and
   in the narrow desktop pane alike — so its buttons are never off screen. */
@container (max-width:700px){
  table.stack{display:block;border:0;background:none;border-radius:0;overflow:visible}
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stack tbody{display:block}
  table.stack tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem;margin-bottom:.6rem}
  table.stack tbody th,table.stack td{display:block;border:0;padding:.2rem 0}
  /* short cells share a line; the buttons keep their own */
  table.stack td[data-label]{display:inline-block;vertical-align:top;margin-right:.9rem;max-width:100%}
  table.stack td:empty{display:none}
  table.stack .rowbtns button{white-space:normal}
  table.stack td[data-label]::before{content:attr(data-label) ": ";font-size:.72rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink2)}
  table.stack .rowbtns{margin-top:.35rem}
}
/* A phone whose browser has no container queries (before 2023) gets the same cards from the width of the
   screen, so a table of five columns is never a sideways scroll there either. */
@supports not (container-type:inline-size){
  @media (max-width:820px){
    table.stack{display:block;border:0;background:none;border-radius:0;overflow:visible}
    table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
    table.stack tbody{display:block}
    table.stack tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem;margin-bottom:.6rem}
    table.stack tbody th,table.stack td{display:block;border:0;padding:.2rem 0}
    table.stack td[data-label]{display:inline-block;vertical-align:top;margin-right:.9rem;max-width:100%}
    table.stack td:empty{display:none}
    table.stack .rowbtns button{white-space:normal}
    table.stack td[data-label]::before{content:attr(data-label) ": ";font-size:.72rem;font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;color:var(--ink2)}
    table.stack .rowbtns{margin-top:.35rem}
  }
}
@media print{
  /* paper is narrower than 820 px, so the phone rules above apply to it: the strip is named with their weight */
  .pnav,.switcher,.side,html.js .strip,.tosec,.rowbtns,.simout,details.disc,.mock{display:none}
  .app{display:block}
  /* "Print the market-day sheet": portal.js puts the class on <html> for the length of the print, and the sheet,
     which says it is sample data and when it was generated, goes to paper alone */
  html.print-sheet .demobar,html.print-sheet header.site,html.print-sheet footer.site,html.print-sheet .hero,
  html.print-sheet [data-pane]>:not(.sheet){display:none}
  html.print-sheet .sheet{display:block}
  html.print-sheet .pane{padding:0}
  .sheet h3{margin:0 0 .3rem;font-size:1.3rem}
  .sheet p{margin:0 0 .3rem;font-size:.9rem}
  .sheet .meta{margin-bottom:.7rem;color:#000}
  .sheet table.data{font-size:.82rem;border-radius:0}
  .sheet table.data th,.sheet table.data td{padding:.42rem .5rem;border:1px solid #777}
  .sheet table.data tbody th{min-width:0}
  .sheet table.data th:last-child{width:24%}
  .sheet .box{display:inline-block;width:1.05rem;height:1.05rem;border:1.5px solid #000;border-radius:3px}
  .sheet tr{break-inside:avoid}
}