/* TREC Connect.

   The phone layout is the design from the static concept (connect/index.html),
   kept deliberately intact: same tokens, same card/tab/report treatment, same
   520px column. Everything is authored mobile-first, then the breakpoints at
   the bottom of this file rebuild it as a real desktop app — sidebar instead of
   a tab bar, multi-column cards, forms side by side. Nothing about the phone
   experience changes to make that work. */

:root{
  --bg:#FCFBF8;--bg2:#F4F1EA;--card:#FFFFFF;--line:#E8E3D8;--red:#E11B22;--ink:#17171A;
  --mut:#5C6068;--mut2:#9A9EA6;--green:#1F9D57;--gold:#A8801F;
  --col:520px;          /* the phone content column */
  --side:250px;         /* desktop sidebar */
  --pad:20px;
  --r:18px;             /* card radius */
  --shadow:0 1px 2px rgba(23,23,26,.04), 0 8px 24px rgba(23,23,26,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.5;
     max-width:var(--col);margin:0 auto;padding-bottom:92px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Sora',sans-serif;letter-spacing:-.02em}

/* --- Icons ---------------------------------------------------------------- */
/* Every icon is a <use> of the inline sprite and inherits currentColor, so an
   active tab tints its glyph red without a second asset. */
.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-.28em;color:inherit}
.ic.sm{width:15px;height:15px;vertical-align:-.18em}
.ic.lg{width:26px;height:26px;vertical-align:middle}

/* --- Chrome --------------------------------------------------------------- */
.side{display:none}
.top{position:sticky;top:0;z-index:20;background:rgba(252,251,248,.9);backdrop-filter:blur(14px);
     display:flex;justify-content:space-between;align-items:center;padding:16px var(--pad);
     border-bottom:1px solid var(--line)}
.top img{height:24px}
.top-right{display:flex;align-items:center;gap:12px}
.top .who{font-size:13px;color:var(--mut);font-weight:500}
.iconbtn{position:relative;background:none;border:none;color:var(--mut);cursor:pointer;padding:4px;
         display:inline-flex;align-items:center;border-radius:9px}
.iconbtn:hover{color:var(--ink)}
.dot{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--red);
     border:2px solid var(--bg)}

.page{padding:var(--pad);display:none}
.page.on{display:block}

/* --- Cards ---------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:14px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.cards .card{margin-bottom:0}
.cards .span2{grid-column:span 2}
/* Full-bleed within the card grid: 2 of 2 on phones, 4 of 4 on desktop, so a
   list card never strands an empty half-row. */
.cards .spanfull{grid-column:1 / -1}
.lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);
     margin-bottom:8px;display:flex;align-items:center;gap:7px}
.big{font-family:'Sora';font-size:30px;font-weight:800}
.big.sm{font-size:24px}
.big small{font-size:14px;color:var(--mut);font-weight:500}
.prog{height:10px;background:var(--bg2);border-radius:6px;overflow:hidden;margin:12px 0 8px}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--red),#ff4a50);border-radius:6px;
        transition:width .5s cubic-bezier(.2,.7,.3,1)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;color:var(--mut)}
.mut-p{font-size:14px;color:var(--mut)}
.spacer{height:14px}
.h2{font-size:22px;margin-bottom:4px}
.lead{font-size:13.5px;color:var(--mut);margin-bottom:18px}

/* TREC Pay rows */
.pay{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;
     border-bottom:1px solid var(--line);font-size:14px}
.pay:last-child{border-bottom:none}
.pay b{font-family:'Sora'}
.chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap;display:inline-block}
.chip.paid{background:rgba(31,157,87,.1);color:var(--green)}
.chip.pend{background:rgba(168,128,31,.12);color:var(--gold)}

/* --- Tool tiles ----------------------------------------------------------- */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;
      cursor:pointer;transition:transform .15s, border-color .15s, box-shadow .15s;
      text-align:left;font:inherit;color:inherit;width:100%;display:block}
.tool:hover{border-color:#d9d2c4;box-shadow:var(--shadow)}
.tool:active{transform:scale(.97)}
.tool .ic{color:var(--red)}
.tool b{display:block;font-size:14.5px;margin-top:10px}
.tool span{display:block;font-size:12px;color:var(--mut)}
.tool.wide{margin-bottom:14px}

/* --- Bottom tab bar (phones) ---------------------------------------------- */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--col);
        background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line);
        display:flex;justify-content:space-around;padding:8px 0 max(10px, env(safe-area-inset-bottom));z-index:30}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:600;
     color:var(--mut2);cursor:pointer;min-width:52px;background:none;border:none;font-family:inherit;
     padding:2px 0}
.tab.on{color:var(--red)}

/* --- Forms ---------------------------------------------------------------- */
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:6px}
input,textarea,select{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:12px;
                      padding:13px 14px;font-size:15px;font-family:'Inter';color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red)}
input:disabled{background:var(--bg2);color:var(--mut2)}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.comp{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:var(--bg2);
      position:relative}
.comp .r3{margin-top:10px}
.comp .kill{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--mut2);
            cursor:pointer;padding:5px;line-height:0;border-radius:8px}
.comp .kill:hover{color:var(--red);background:rgba(225,27,34,.07)}

/* --- Buttons -------------------------------------------------------------- */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;text-align:center;
     background:var(--red);color:#fff;font-weight:700;font-size:15px;border:none;border-radius:14px;
     padding:16px;cursor:pointer;font-family:'Inter';text-decoration:none;transition:filter .15s}
.btn:hover{filter:brightness(1.06)}
.btn.sec{background:var(--bg2);color:var(--ink);border:1.5px solid var(--line);font-weight:600}
.btn.sec:hover{filter:none;border-color:#d9d2c4}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;pointer-events:none}
.btnrow{display:grid;gap:10px}
.linkbtn{background:none;border:none;color:var(--red);font-weight:600;font-size:13px;cursor:pointer;
         font-family:inherit;padding:0}
.linkbtn.mut{color:var(--mut2)}
.linkbtn:hover{text-decoration:underline}

/* --- Report (CMA + buyer deck) -------------------------------------------- */
.rep{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rep .hd{background:var(--ink);color:#fff;padding:26px 22px}
.rep .hd img{height:20px;filter:brightness(0) invert(1)}
.rep .hd h2{font-size:21px;margin-top:14px;color:#fff}
.rep .hd .sub{font-size:13px;color:#C9CCD1;margin-top:3px}
.rep .price{padding:26px 22px;text-align:center;border-bottom:1px solid var(--line)}
.rep .price .v{font-family:'Sora';font-size:32px;font-weight:800;color:var(--red)}
.rep .price .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin-bottom:6px}
.rep .price .rng{font-size:14px;color:var(--mut);margin-top:6px}
.rep .twrap{overflow-x:auto}
.rep table{width:100%;min-width:430px;border-collapse:collapse;font-size:12.5px}
.rep th,.rep td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line)}
.rep th:first-child,.rep td:first-child{text-align:left}
.rep thead th{background:var(--bg2);font-weight:700;font-size:11px;text-transform:uppercase;
              letter-spacing:.06em;color:var(--mut)}
.rep .sect{padding:18px 22px}
.rep .sect h3{font-size:14px;margin-bottom:8px}
.rep .sect p{font-size:13px;color:var(--mut)}
.rep .foot{padding:16px 22px;background:var(--bg2);font-size:10.5px;color:var(--mut2);line-height:1.5}

/* --- Feedback ------------------------------------------------------------- */
.note{font-size:12px;color:var(--mut2);text-align:center;margin:14px 0}
.toast{display:none;background:rgba(31,157,87,.09);border:1.5px solid var(--green);color:var(--green);
       padding:15px;border-radius:14px;font-size:14px;text-align:center}
.toast.bad{background:rgba(225,27,34,.07);border-color:var(--red);color:var(--red)}
.err{display:none;background:rgba(225,27,34,.07);border:1.5px solid var(--red);color:var(--red);
     padding:13px 15px;border-radius:12px;font-size:13.5px;margin-bottom:14px}
.err.on{display:block}
.empty{font-size:13.5px;color:var(--mut2);padding:6px 0}

/* --- Lists ---------------------------------------------------------------- */
.item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;
      border-bottom:1px solid var(--line);font-size:14px}
.item:last-child{border-bottom:none}
.item .meta{font-size:12px;color:var(--mut2)}
.item .acts{display:flex;gap:12px;align-items:center;flex:none}
.files{display:grid;gap:10px;margin-bottom:14px}
.file{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--bg2);
      border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px}
.file .sz{font-size:11.5px;color:var(--mut2)}
.file a{color:var(--red);font-weight:700;text-decoration:none;font-size:13px;display:inline-flex;
        align-items:center;gap:6px}

/* --- Notifications -------------------------------------------------------- */
.alert{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.alert:last-child{border-bottom:none}
.alert .ic{color:var(--mut2);margin-top:2px}
.alert.unread .ic{color:var(--red)}
.alert b{display:block;font-size:14px}
.alert p{font-size:13px;color:var(--mut)}
.alert time{font-size:11.5px;color:var(--mut2)}
.alert .kill{background:none;border:none;color:var(--mut2);cursor:pointer;padding:4px;line-height:0;flex:none}
.alert .kill:hover{color:var(--red)}

/* --- Academy -------------------------------------------------------------- */
.mod{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
     border-radius:14px;padding:16px;margin-bottom:12px;cursor:pointer;width:100%;text-align:left;
     font:inherit;color:inherit;transition:border-color .15s, box-shadow .15s}
.mod:hover{border-color:#d9d2c4;box-shadow:var(--shadow)}
.mod .num{font-family:'Sora';font-weight:800;font-size:14px;color:var(--mut2);min-width:22px;flex:none}
.mod.done .num{color:var(--green)}
.mod b{display:block;font-size:15px}
.mod p{font-size:13px;color:var(--mut);margin-top:3px}
.mod .meta{font-size:11.5px;color:var(--mut2);margin-top:6px;display:flex;gap:12px;align-items:center}
.mod .tick{flex:none;color:var(--line)}
.mod.done .tick{color:var(--green)}
.live{background:var(--ink);color:#fff;border:none;border-radius:var(--r);padding:20px;margin-bottom:14px}
.live .lbl{color:rgba(255,255,255,.5)}
.live b{font-family:'Sora';font-size:18px;display:block}
.live p{font-size:13.5px;color:#C9CCD1;margin-top:4px}
.live a{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--red);color:#fff;
        text-decoration:none;font-weight:700;font-size:14px;padding:11px 16px;border-radius:12px}
.prose{font-size:14.5px;color:var(--mut);line-height:1.65}
.prose p{margin-bottom:12px}
.prose p:last-child{margin-bottom:0}

/* --- Account button + menu ------------------------------------------------- */
/* The profile is a real control, not a label: one menu, opened from the top bar
   on phones and from the sidebar footer on desktop. */
.avatar{width:30px;height:30px;flex:none;border-radius:50%;background:var(--ink);color:#fff;
        font-family:'Sora',sans-serif;font-weight:700;font-size:12px;display:inline-flex;
        align-items:center;justify-content:center;letter-spacing:.02em}
.avatar.lg{width:42px;height:42px;font-size:15px}
.acctbtn{display:flex;align-items:center;gap:9px;background:none;border:none;font:inherit;color:inherit;
         cursor:pointer;padding:4px 6px;border-radius:12px;max-width:220px;transition:background .12s}
.acctbtn:hover{background:rgba(23,23,26,.05)}
.acctbtn[aria-expanded="true"]{background:rgba(23,23,26,.07)}
.acctbtn .ic{color:var(--mut2)}
.acctbtn .who{font-size:13px;color:var(--mut);font-weight:600;white-space:nowrap;overflow:hidden;
              text-overflow:ellipsis}

.acctmenu{position:fixed;z-index:60;width:min(320px, calc(100vw - 24px));background:var(--card);
          border:1px solid var(--line);border-radius:16px;padding:8px;
          box-shadow:0 4px 12px rgba(23,23,26,.06), 0 24px 48px rgba(23,23,26,.12)}
.acctmenu[hidden]{display:none}
.acctmenu-head{display:flex;align-items:center;gap:12px;padding:12px 12px 14px;border-bottom:1px solid var(--line)}
.acctmenu-head b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctmenu-head .mini{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctmenu-head .state{margin-left:auto}
.acctmenu-group{padding:8px 0;border-bottom:1px solid var(--line)}
.acctmenu-label{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
                color:var(--mut2);padding:2px 12px 6px}
.acctitem{display:flex;align-items:flex-start;gap:11px;width:100%;background:none;border:none;font:inherit;
          color:inherit;text-align:left;cursor:pointer;padding:9px 12px;border-radius:11px;
          transition:background .12s}
.acctitem:hover{background:var(--bg2)}
.acctitem .ic{color:var(--mut2);margin-top:2px}
.acctitem:hover .ic{color:var(--red)}
.acctitem b{display:block;font-size:14px;font-weight:600}
.acctitem em{display:block;font-style:normal;font-size:12px;color:var(--mut2);margin-top:1px}
.acctitem.on b{color:var(--red)}
.acctitem.danger b{color:var(--red)}
.acctitem.danger .ic{color:var(--red)}
.acctmenu-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px 4px}
.acctmenu-foot .acctitem{width:auto;padding:6px 8px;margin-left:-8px}

/* --- Switch rows (Preferences) --------------------------------------------- */
.switchrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;
           border-bottom:1px solid var(--line);cursor:pointer}
.switchrow:last-of-type{border-bottom:none}
.switchrow b{display:block;font-size:14px;font-weight:600}
.switchrow em{display:block;font-style:normal;font-size:12.5px;color:var(--mut2);margin-top:2px}
/* A checkbox drawn as a track and a knob: real input, real keyboard behaviour. */
.switch{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:27px;margin:0;padding:0;
        border-radius:99px;background:var(--bg2);border:1.5px solid var(--line);position:relative;
        cursor:pointer;transition:background .18s, border-color .18s}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
               background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .18s}
.switch:checked{background:var(--red);border-color:var(--red)}
.switch:checked::after{transform:translateX(19px)}
.switch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Stacked tool tiles (the More hub) */
.tools.stack{grid-template-columns:1fr}
.tools.stack .tool{margin-bottom:0}

/* Definition rows on the Info screen */
.deflist{display:grid;gap:0}
.defrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;
        border-bottom:1px solid var(--line);font-size:14px}
.defrow:last-child{border-bottom:none}
.defrow span{color:var(--mut)}
.defrow b{font-family:'Sora',sans-serif;font-weight:700;text-align:right}

/* --- Admin ---------------------------------------------------------------- */
.seg{display:flex;gap:6px;background:var(--bg2);border-radius:12px;padding:4px;margin-bottom:16px;
     overflow-x:auto}
.seg button{flex:1;background:none;border:none;border-radius:9px;padding:9px 10px;font-size:12.5px;
            font-weight:600;color:var(--mut);font-family:inherit;cursor:pointer;white-space:nowrap}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.07)}
.mini{font-size:12px;color:var(--mut2)}
.rowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.rowbtns button{background:var(--bg2);border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;
                font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;color:var(--ink);
                display:inline-flex;align-items:center;gap:6px}
.rowbtns button:hover{border-color:#d9d2c4}
.rowbtns button.danger{color:var(--red);border-color:rgba(225,27,34,.3)}
.rowbtns button[disabled]{opacity:.5;pointer-events:none}
.state{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--bg2);
       color:var(--mut);white-space:nowrap}
.state.ok{background:rgba(31,157,87,.1);color:var(--green)}
.state.warn{background:rgba(168,128,31,.12);color:var(--gold)}
.state.bad{background:rgba(225,27,34,.08);color:var(--red)}

/* --- Auth pages ----------------------------------------------------------- */
.auth{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:28px 22px}
.auth .mark{text-align:center;margin-bottom:26px}
.auth .mark img{height:34px}
.auth h1{font-size:24px;margin-bottom:6px;text-align:center}
.auth .sub{font-size:14px;color:var(--mut);text-align:center;margin-bottom:24px}
.auth .card{margin-bottom:16px}
.auth .alt{font-size:13.5px;color:var(--mut);text-align:center}
.auth .alt a{color:var(--red);font-weight:600;text-decoration:none}

/* Two-column form/list wrapper. A no-op on phones; the breakpoints split it. */
.cols{display:block}

/* =========================================================================
   TABLET — 700px and up. Still the single column, but wider, and the extra
   room goes to the forms rather than to margins.
   ========================================================================= */
@media (min-width:700px){
  :root{--col:660px;--pad:26px}
  .tools{grid-template-columns:repeat(4,1fr)}
  .tool b{margin-top:12px}
  .btnrow{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .tabbar .tab{min-width:64px;font-size:10.5px}
}

/* =========================================================================
   DESKTOP — 960px and up. The phone column becomes a real app: a persistent
   sidebar replaces the tab bar, and content spreads into columns. The page
   show/hide logic and every data path are unchanged; this is layout only.
   ========================================================================= */
@media (min-width:960px){
  body{max-width:none;margin:0;padding-bottom:0;display:grid;
       grid-template-columns:var(--side) minmax(0,1fr);min-height:100dvh}

  /* Sidebar */
  .side{display:flex;flex-direction:column;gap:20px;padding:24px 16px;
        border-right:1px solid var(--line);background:var(--bg2);
        position:sticky;top:0;height:100dvh}
  .side-mark{padding:4px 10px 0}
  .side-mark img{height:26px}
  .side-nav{display:flex;flex-direction:column;gap:2px;flex:1}
  .navitem{position:relative;display:flex;align-items:center;gap:12px;padding:11px 12px;border:none;
           background:none;border-radius:11px;font:inherit;font-size:14px;font-weight:600;
           color:var(--mut);cursor:pointer;text-align:left;width:100%;transition:background .12s,color .12s}
  .navitem:hover{background:rgba(23,23,26,.045);color:var(--ink)}
  .navitem.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
  .navitem.on .ic{color:var(--red)}
  .navitem .dot{position:static;margin-left:auto}
  .navitem.sub{font-size:13px;font-weight:500;padding:9px 12px}
  .side-foot{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:2px}
  .side-acct{max-width:none;width:100%;padding:9px 10px}
  .side-acct .acctbtn-text{flex:1;min-width:0}
  .side-acct b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side-acct .mini{display:block;line-height:1.2}

  /* The tab bar and the mobile logo header are the sidebar's job now. */
  .tabbar{display:none}
  .top{background:transparent;border-bottom:1px solid var(--line);
       padding:18px max(var(--pad),28px);backdrop-filter:none}
  .top img{display:none}
  .top-right{margin-left:auto}

  /* Content column: generous but still a readable measure. */
  .main{min-width:0}
  .page{padding:28px max(var(--pad),28px) 48px;max-width:1180px}

  /* Dashboard: the cap gets the width it deserves, benefits sit beside it. */
  .cards{grid-template-columns:repeat(4,1fr)}
  .cards .span2{grid-column:span 2}
  .big{font-size:34px}
  .big.sm{font-size:26px}

  /* Forms and their saved-item lists, side by side. */
  .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
  .col{min-width:0}

  /* A document is a document — keep it at a page-ish width, not full bleed. */
  #p-report .rep,#p-report .btnrow,#p-report .note{max-width:760px}
  #p-module .card,#p-module .btnrow{max-width:760px}
  .btnrow{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

  .seg{max-width:620px}
  .live{max-width:none}
  #academyList{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
  #academyList .mod{margin-bottom:0}
}

/* Wide desktop: let the dashboard breathe rather than stretching cards. */
@media (min-width:1440px){
  .page{padding-left:48px;padding-right:48px}
}

/* Someone who prefers less motion should not get the cap bar sweeping. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* =========================================================================
   PRINT — the report only, edge to edge, no app chrome.
   ========================================================================= */
@media print{
  body{max-width:none;display:block;padding:0}
  .top,.tabbar,.side,.acctmenu,.noprint{display:none!important}
  .page{display:none!important;padding:0}
  .page#p-report{display:block!important;padding:0;max-width:none}
  #p-report .rep{max-width:none}
  .rep{border:none;border-radius:0}
}