/* The product's design system. * * Lifted from docs/amendment-gate.html and docs/dashboard-and-findings.html so * the screens and the mocks cannot drift apart. One deliberate difference: * nothing here is scoped to a demo page. * * The faces ARE shipped, six of them, 118 KB in total. They were left out at * first on the assumption that the mock's embedded base64 was heavy - it is * not, and the assumption was never measured. Without them every screen fell * back to the system sans, and since IBM Plex's narrow technical letterforms * are most of what the mock looks LIKE, the result read as a different design * rather than as the same design in another font. * * The rule the whole sheet exists to serve: a reserve row and an amendment * clause row are THE SAME COMPONENT (.row). Two stylesheets would have meant * two behaviours, and the one nobody looked at would have been the wrong one. */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/product/fonts/plex-sans-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/static/product/fonts/plex-sans-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/static/product/fonts/plex-sans-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/product/fonts/plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/product/fonts/plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url(/static/product/fonts/plex-serif-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0100-017F,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} :root{ --paper:#F7F8FB;--surface:#FFFFFF;--ink:#131A24;--ink-2:#4E5A69;--ink-3:#7E8A99;--ink-4:#A9B3BF; --line:#E1E5EB;--line-2:#EEF1F5; /* The one hover. Five clickable row shapes had drifted into two answers - * the library's, which you can see, and #FAFCFE, which you cannot. Named * once so it cannot drift again. */ --hover:var(--line-2); --navy:#1B3A5C;--navy-2:#14304C;--navy-soft:#EAF0F6;--navy-line:#C6D4E3; --pos:#1E6B52;--pos-soft:#E9F3EF;--pos-line:#C2DDD1; --neg:#A8452B;--neg-soft:#FBF1EE;--neg-line:#EBD2C8; --warn:#96631A;--warn-soft:#FBF3E5;--warn-line:#E9D8B8; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --serif:"IBM Plex Serif",Georgia,serif; --sh1:0 1px 2px rgba(19,26,36,.05); --sh2:0 1px 3px rgba(19,26,36,.06),0 14px 38px rgba(19,26,36,.07); --sh3:0 24px 60px rgba(19,26,36,.18); } *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans); font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer} svg{display:block;flex:none} :focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:3px} [hidden]{display:none!important} /* ------------------------------------------------------------------ */ /* Shell. */ /* */ /* There is no sidebar, no top menu and no step strip. The numbered */ /* strip across the mocks is scaffolding for clicking between screens */ /* and has no counterpart here (design note 8.0). Navigation is the */ /* dashboard plus context buttons, and that is all. */ /* ------------------------------------------------------------------ */ /* The brand strip. Edge to edge, above everything, and the same on every * screen - it names the product, says whose session this is and holds the one * way out. It carries NO links: the comparator's equivalent has tabs because * it has three destinations; this product has one root. * * The mark is drawn here rather than fetched because there is no artwork file * yet. When there is, app.js's logoMark() returns an and .mark keeps * only its box. */ .brand{display:flex;align-items:center;gap:14px;height:52px;padding:0 26px; background:var(--navy);color:#fff} /* The lockup is ONE file, painted by the strip rather than baked in a colour: * a mask takes its shape from brand/logo.svg and its colour from here. The * alternative was a white copy and an ink copy of the same artwork, which is * two files to update and one of them will be the one nobody updates. * * Guarded, because a browser that cannot mask would paint the plain white box * the background alone makes - which is worse than no logo. */ .brand .mark{display:block;flex:none} @supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){ .brand .mark{height:30px;aspect-ratio:6067/1806;background:currentColor; -webkit-mask:url(/static/product/brand/logo.svg) no-repeat center/contain; mask:url(/static/product/brand/logo.svg) no-repeat center/contain} } /* The mark is a control now: the way home. Quiet about it - a logo that grows * a border on hover stops being a logo - so it says so by lifting its own * opacity, which is the only thing on this strip that can change without * turning navy furniture into a button. */ .brand .logo{display:flex;align-items:center;border:0;background:none;padding:0; margin:0;color:inherit;opacity:.92;transition:opacity .12s} .brand .logo:hover{opacity:1} .brand .logo:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px} .brand .sp{flex:1} .brand .who{display:flex;align-items:center;gap:9px;min-width:0} .brand .av{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14); display:flex;align-items:center;justify-content:center;flex:none; font-family:var(--mono);font-size:10.5px;color:#fff} .brand .nm{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Quiet, and last: leaving is not what anyone came here to do. */ .brand .out{display:inline-flex;align-items:center;gap:6px;border:0;background:none; color:rgba(255,255,255,.6);font-size:12.5px;padding:5px 9px;border-radius:6px; margin-left:6px;transition:.12s} .brand .out:hover{background:rgba(255,255,255,.12);color:#fff} /* 1146 = the mock's 1420 stage minus its 252px notes rail and the 26px gap. * The rail is scaffolding and does not ship; its WIDTH does, because every * row in the mock was proportioned against a card that wide. */ .stage{max-width:1146px;margin:0 auto;padding:34px 26px 80px} .app{background:var(--surface);border:1px solid var(--line);border-radius:9px; box-shadow:var(--sh2);overflow:hidden} .bar{display:flex;align-items:center;gap:12px;padding:0 26px;height:54px;border-bottom:1px solid var(--line)} .bar .sp{flex:1} /* The trail. Weight carries the reading: the place you are AT is the dark one, * the places you can go back to are quiet. Reversing that - highlighting the * links - turns the strip into a menu, which is the one thing it is not. */ .trail{display:flex;align-items:center;gap:8px;min-width:0} .trail .sep{color:var(--ink-4);font-size:12.5px} .trail .crumb{border:0;background:none;padding:5px 8px;border-radius:6px; font-size:12.5px;color:var(--ink-3);transition:.12s;max-width:34ch; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trail button.crumb:hover{background:var(--line-2);color:var(--ink)} .trail .crumb.here{color:var(--ink);font-weight:500;padding-left:0;padding-right:0} .trail .crumb.mono{font-family:var(--mono);font-size:12.5px} .main{padding:26px 30px 30px} h1{margin:0;font-size:21px;font-weight:600;letter-spacing:-.022em} .lede{margin:6px 0 0;color:var(--ink-2);font-size:13.5px;max-width:70ch} .badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;border-radius:999px; padding:4px 11px;border:1px solid var(--line);background:var(--line-2);color:var(--ink-2);white-space:nowrap} .badge i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block} .badge.warn{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn)} .badge.pos{border-color:var(--pos-line);background:var(--pos-soft);color:var(--pos)} .badge.neg{border-color:var(--neg-line);background:var(--neg-soft);color:var(--neg)} /* Some badges lead with an icon instead of the dot. The dot says "a state"; * an icon says WHICH state, which is what a list of thirty credits needs to be * scannable without reading a word of it. */ .badge svg,.rstate svg{flex:none;margin-right:-1px} /* ---- something is still happening ---------------------------------------- * A run under way used to sit in the same grey pill as "cancelled", so a * credit being examined right now and one abandoned last week were the same * shape at a glance - and a reader scanning the list had no reason to look * twice at either. `.live` is the navy of an action in progress, and its * spinner is the only moving thing on an otherwise still page. * * The rotation carries no progress claim - a run has no percentage until the * strip on its own screen works one out - it only says the work has not * stopped. The blanket prefers-reduced-motion rule at the end of this file * turns it off; the icon and the words still say the same thing standing * still, which is why the state is never carried by the motion alone. */ .badge.live,.rstate.live{border-color:var(--navy-line);background:var(--navy-soft); color:var(--navy)} .badge.live svg,.rstate.live svg{animation:spin 1.1s linear infinite;transform-origin:50% 50%} @keyframes spin{to{transform:rotate(360deg)}} .btn{display:inline-flex;align-items:center;gap:8px;border-radius:7px;padding:9px 18px; font-size:13px;font-weight:500;border:1px solid transparent;transition:.13s} .btn[disabled]{opacity:.55;cursor:default} .pri{background:var(--navy);color:#fff;box-shadow:0 1px 2px rgba(27,58,92,.24)} .pri:hover:not([disabled]){background:var(--navy-2)} .gho{background:var(--surface);color:var(--ink-2);border-color:var(--line)} .gho:hover:not([disabled]){border-color:var(--ink-4);color:var(--ink)} .rule{display:flex;gap:11px;margin-top:24px;padding:13px 15px;border-radius:8px; background:var(--line-2);font-size:12.3px;color:var(--ink-2);line-height:1.6} .rule svg{color:var(--ink-4);margin-top:1px} .rule b{color:var(--ink);font-weight:600} .foot{display:flex;align-items:center;gap:11px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)} .foot .sp{flex:1} .foot .hint{font-size:12.5px;color:var(--ink-3);max-width:44ch;text-align:right} .empty{padding:44px 10px;text-align:center;color:var(--ink-3);font-size:13px} .empty b{display:block;color:var(--ink);font-size:14.5px;font-weight:600;margin-bottom:5px} .err{margin-top:18px;border:1px solid var(--neg-line);background:var(--neg-soft);color:var(--neg); border-radius:8px;padding:12px 15px;font-size:12.5px;line-height:1.6} .err b{font-weight:600} /* ------------------------------------------------------------------ */ /* Phase indicator. Kept from examples/demo.js:renderStepIndicators. */ /* ------------------------------------------------------------------ */ .run{display:flex;align-items:flex-start;gap:20px;margin-top:22px;padding-bottom:14px;border-bottom:1px solid var(--line)} .run .jid{font-family:var(--mono);font-size:13.5px;font-weight:500} .run .jm{font-size:12px;color:var(--ink-3);margin-top:3px} .run .el{margin-left:auto;text-align:right} .run .el .v{font-family:var(--mono);font-size:16px;font-weight:500;font-variant-numeric:tabular-nums} .run .el .l{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);font-weight:600;margin-top:2px} .track{height:3px;background:var(--line-2);border-radius:2px;overflow:hidden;margin-top:16px; position:relative} .track i{display:block;height:100%;background:var(--warn);transition:width .9s cubic-bezier(.4,0,.2,1)} /* A phase can take ninety seconds, during which the bar does not move and the * screen reads as dead. The sweep says "still working" without claiming * progress that has not happened - it runs on the UNFILLED part of the track. */ .track.live::after{content:"";position:absolute;inset:0;border-radius:2px; background:linear-gradient(90deg,transparent,rgba(150,99,26,.22),transparent); animation:sweep 1.9s ease-in-out infinite} @keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}} .pz.hold .c{animation:hold 1.9s ease-in-out infinite} @keyframes hold{0%,100%{box-shadow:0 0 0 4px var(--warn-soft)} 50%{box-shadow:0 0 0 8px rgba(150,99,26,.10)}} /* The run log. One line per phase the run has left behind, so a reader can see * where the time went rather than watching a bar that has not moved. */ .rlog{margin-top:22px;border-top:1px solid var(--line);padding-top:6px} .rl{display:flex;align-items:baseline;gap:12px;padding:7px 2px;font-size:12.3px; color:var(--ink-2);border-bottom:1px solid var(--line-2);animation:rlin .25s ease} .rl:last-child{border-bottom:0} .rl .t{font-family:var(--mono);font-size:11px;color:var(--ink-4);width:54px;flex:none; font-variant-numeric:tabular-nums} .rl .k{margin-left:auto;font-family:var(--mono);font-size:10.3px;color:var(--ink-4);flex:none} @keyframes rlin{from{opacity:0;transform:translateY(-3px)}} .trackm{display:flex;gap:10px;margin-top:8px;font-size:12.5px;color:var(--ink-2)} .trackm .pc{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-4)} .phz{display:flex;align-items:flex-start;margin-top:22px} .pz{flex:1;min-width:0;text-align:center} .pz .c{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);margin:0 auto; display:grid;place-items:center;color:var(--ink-4);background:var(--surface)} .pz.done .c{background:var(--navy);border-color:var(--navy);color:#fff} .pz.hold .c{border-color:var(--warn);color:var(--warn);box-shadow:0 0 0 4px var(--warn-soft)} .pz .l{font-size:10.5px;color:var(--ink-4);margin-top:7px;display:block;line-height:1.3} .pz.done .l{color:var(--ink-2)} .pz.hold .l{color:var(--warn);font-weight:600} .pzc{height:1.5px;background:var(--line);flex:0 0 14px;margin-top:13px} .pzc.done{background:var(--navy)} /* ------------------------------------------------------------------ */ /* Version rail (amendment gate). */ /* Boxes carry the FIELD CODES a step changed, never an amount. */ /* ------------------------------------------------------------------ */ .vhead{display:flex;align-items:baseline;gap:12px;margin-top:26px;margin-bottom:11px} .vhead .k{font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4)} .vhead .h{font-size:12px;color:var(--ink-3)} .vrail{display:flex;align-items:stretch;overflow-x:auto;padding-bottom:3px} .vstep{min-width:172px;border:1px solid var(--line);border-radius:8px;padding:11px 14px; background:var(--surface);text-align:left;flex:none;transition:.14s} .vstep:hover{border-color:var(--navy-line);background:#FCFDFE} .vstep .vn{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.07em;color:var(--ink-4)} .vstep .vl{font-size:13px;font-weight:600;margin-top:3px;letter-spacing:-.012em} .vstep .va{font-family:var(--mono);font-size:11.5px;margin-top:6px;color:var(--ink-2)} .vstep .vd{font-size:10.5px;color:var(--ink-4);margin-top:2px} .vstep .vx{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:11px;color:var(--navy)} .vstep.skip{border-style:dashed;background:#FBFCFD;cursor:default} .vstep.skip .vl{text-decoration:line-through;color:var(--ink-4)} .vstep.skip .va,.vstep.skip .vd{color:var(--ink-4)} .vstep.skip .vx{visibility:hidden} .varr{display:flex;align-items:center;color:var(--ink-4);padding:0 8px;flex:none} /* ------------------------------------------------------------------ */ /* Group head - one amendment, or one findings category. */ /* ------------------------------------------------------------------ */ .grp{margin-top:28px} .grp.off{opacity:.5} .ghead{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)} .ghead .gn{font-size:15px;font-weight:600;letter-spacing:-.015em} .ghead .gd{font-size:12px;color:var(--ink-4)} .ghead .sum{font-size:12px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px} .ghead .sum svg{color:var(--pos)} .ghead .sum.neg svg{color:var(--neg)} .ghead .sp{flex:1} .seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface)} .seg button{border:0;background:none;color:var(--ink-3);font-size:12.5px;padding:6px 15px;transition:.12s} .seg button+button{border-left:1px solid var(--line)} .seg button.on{background:var(--navy);color:#fff} .seg button.on.no{background:var(--warn);color:#fff} .seg button:hover:not(.on){background:var(--line-2);color:var(--ink)} .chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface); border-radius:7px;padding:6px 13px;font-size:12.5px;color:var(--ink-2);transition:.12s} .chip:hover{border-color:var(--navy-line);color:var(--navy);background:var(--navy-soft)} /* ------------------------------------------------------------------ */ /* THE ROW. One component, two callers. */ /* */ /* Amendment clause: mark - code - name - old→new - evidence - chevron */ /* Reserve: mark - code - title - crux - evidence - chevron */ /* */ /* No accordion, no nested card, no body text. Everything a row cannot */ /* say in one line is in the panel; the row's job is to let a reader */ /* see what does not match without opening anything. */ /* ------------------------------------------------------------------ */ .row{display:grid;grid-template-columns:20px 46px 150px minmax(0,1.25fr) minmax(0,1fr) 16px; gap:16px;align-items:center;width:100%;text-align:left;background:none;border:0; padding:12px 8px;border-bottom:1px solid var(--line-2);border-radius:6px;transition:background .12s} .row:hover{background:var(--hover)} /* No handler, no affordance: no chevron, no hover, no pointer. */ .row.flat{cursor:default} .row.flat:hover{background:none} .row.seq{grid-template-columns:34px 46px minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr) 16px} .row .mk{display:flex;justify-content:center} .row .mk.yes{color:var(--pos)} .row .mk.no{color:var(--ink-4)} .row .mk.bad{color:var(--neg)} .row .sn{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:center} /* Overflow rule, like .nm and .crux beside it. The one cell in the row without one, so a value wider than the 46px column ran over the text next to it - a document type printed on top of its own finding. */ .row .cd{font-family:var(--mono);font-size:11.5px;color:var(--ink-3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row .nm{font-size:13px;font-weight:500;letter-spacing:-.008em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row .crux{font-family:var(--mono);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row .crux .old{color:var(--ink-4);text-decoration:line-through;text-decoration-thickness:1px} .row .crux .arw{color:var(--ink-4);padding:0 6px} .row .crux .new{font-weight:500} .row .crux .dl{font-weight:600} .row .crux .op{color:var(--pos);font-weight:500} .row .crux .a{color:var(--neg);font-weight:600} .row .crux .b{font-weight:500} .row .ev{display:flex;align-items:center;gap:8px;min-width:0} .row .ev .st{font-size:11.5px;font-weight:600;color:var(--pos);white-space:nowrap} .row .ev .st.no{color:var(--ink-4);font-weight:400} .row .ev .src{font-family:var(--mono);font-size:10.3px;background:var(--line-2);border-radius:4px; padding:2px 7px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .row .ev .plus{font-family:var(--mono);font-size:10.3px;border:1px solid var(--pos-line); background:var(--pos-soft);color:var(--pos);border-radius:4px;padding:2px 6px;flex:none} /* A reserve whose value could not be located on a page says so, in words. * A guessed box is never drawn (design note 3.4). */ .row .ev .noanchor{font-family:var(--mono);font-size:10.3px;border:1px dashed var(--line); border-radius:4px;padding:2px 6px;color:var(--ink-4);flex:none} .row .go{color:var(--ink-4);display:flex;justify-content:flex-end} .row:hover .go{color:var(--navy)} /* ------------------------------------------------------------------ */ /* The panel. ONE component; what it shows is a parameter. */ /* ------------------------------------------------------------------ */ .pv{position:fixed;inset:0;z-index:60;display:none} .pv.on{display:block} .pv-bg{position:absolute;inset:0;background:rgba(19,26,36,.32);animation:fade .18s ease} @keyframes fade{from{opacity:0}} .pv-panel{position:absolute;top:0;right:0;bottom:0;width:660px;max-width:96vw;background:var(--surface); display:flex;flex-direction:column;box-shadow:var(--sh3);animation:slide .22s cubic-bezier(.32,.72,0,1)} .pv-panel.wide{width:900px} /* Reading a document is not reading an anchor. An evidence panel frames one * box; this one has to hold a page of paper, and a page at 900px still asks * the reader to scroll a scan they came here to look at. */ .pv-panel.full{width:1240px} @keyframes slide{from{transform:translateX(24px);opacity:.6}} .pv-h{display:flex;align-items:flex-start;gap:14px;padding:18px 22px 14px} .pv-h .t{font-size:15.5px;font-weight:600;letter-spacing:-.017em} .pv-h .f{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:3px} .pv-x{margin-left:auto;border:0;background:none;color:var(--ink-4);padding:5px;border-radius:6px;display:flex;transition:.12s} .pv-x:hover{background:var(--line-2);color:var(--ink)} .pv-b{padding:20px 22px;overflow-y:auto;flex:1;background:var(--paper)} .pv-f{padding:12px 22px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-4); display:flex;gap:14px;align-items:center;font-family:var(--mono);flex-wrap:wrap; background:var(--surface)} .pv-f .sp{flex:1} .claim{font-size:13.5px;line-height:1.62;color:var(--ink)} .claim .st{font-weight:600;color:var(--pos)} .claim .st.no{color:var(--ink-3)} .claim .st.bad{color:var(--neg)} .why{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .why .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);font-weight:600} .why p{margin:7px 0 0;font-size:12.8px;line-height:1.62;color:var(--ink-2)} .why .refc{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:8px} .srcline{display:flex;align-items:center;gap:9px;margin-top:13px;padding-top:13px; border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)} .srcline .src{font-family:var(--mono);font-size:11px;background:var(--line-2);border-radius:5px;padding:3px 8px;color:var(--ink-2)} .deltabox{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;margin:14px 0 4px} .deltabox .old{color:var(--ink-4);text-decoration:line-through} .deltabox .new{font-weight:600} .opbox{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:11px 13px; font-family:var(--mono);font-size:11.5px;line-height:1.7;margin:14px 0 4px} .opbox .op{color:var(--ink-4)} .opbox .add{color:var(--pos);font-weight:500} .opbox .unres{color:var(--neg);font-weight:500} .foundin{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)} .foundin b{color:var(--ink);font-weight:600} .hitline{display:flex;align-items:center;gap:9px;margin:20px 0 10px;font-size:12px;color:var(--ink-3)} .hitline .n{width:19px;height:19px;border-radius:50%;background:var(--pos);color:#fff;font-size:10px; font-weight:700;display:grid;place-items:center;flex:none} .hitline .src{font-family:var(--mono);font-size:11px;background:var(--line-2);border-radius:5px;padding:3px 8px;color:var(--ink-2)} .hitval{font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--ink); background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--pos); border-radius:6px;padding:11px 14px;margin:0 0 4px;white-space:pre-wrap} .hitline .fn{font-family:var(--mono);font-size:11px;color:var(--ink-4);margin-left:auto} .noanchor{border-left:2px solid var(--line);padding:2px 0 2px 14px;margin-top:16px; font-size:12.5px;color:var(--ink-2);line-height:1.6} .noanchor b{color:var(--ink);font-weight:600} /* Page image + anchor box. Coordinates are normalised 0-1, so the same * numbers land correctly on the thumbnail and on the full render. */ .pgm{display:flex;align-items:center;gap:9px;margin:18px 0 10px;font-size:11.5px;color:var(--ink-4)} .pgm .pn{font-family:var(--mono);border:1px solid var(--line);border-radius:5px;padding:2px 8px;color:var(--ink-3);background:var(--surface)} /* The magnifier. The viewport has a fixed height and scrolls; the stage inside * it is what grows, and the anchor box grows with it because both are sized in * percentages of the same element. */ .pgv{margin:0 0 4px} .pblock{margin-bottom:6px} /* The way to the next few pages. Quiet, because scrolling to it is usually * request enough - it is the answer for browsers that cannot say what is on * screen. */ .pmore{display:flex;align-items:center;justify-content:center;gap:10px;width:100%; border:1px dashed var(--line);background:var(--surface);border-radius:8px; padding:14px 0;margin:10px 0 4px;font-family:inherit;font-size:12.5px; color:var(--ink-2);transition:.12s} .pmore:hover{border-color:var(--navy-line);background:var(--navy-soft);color:var(--navy)} .pmore .mt{font-size:11.5px;color:var(--ink-4)} .pgbar{display:flex;align-items:center;gap:6px;margin:0 0 9px} .pgbar button{font:inherit;font-size:11.5px;color:var(--ink-2);background:var(--surface); border:1px solid var(--line);border-radius:6px;padding:4px 10px;cursor:pointer;line-height:1.5} .pgbar button:hover:not([disabled]){background:var(--line-2);color:var(--ink)} /* An inert control has to LOOK inert, or the reader clicks it and concludes the * screen is broken. */ .pgbar button[disabled]{opacity:.4;cursor:default} .pgbar .zb{font-family:var(--mono);min-width:28px;text-align:center;padding:4px 0} /* One of the three is a glyph rather than a character. Centred by flex so it * sits on the same line as the − and the +, which text-align cannot do for an * inline svg. */ .pgbar .zb svg{display:block;margin:0 auto} .pgbar .sp{flex:1} .pgbar .lvl{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);min-width:38px;text-align:center} .pgw{position:relative;background:var(--surface);border:1px solid rgba(19,26,36,.09);border-radius:3px; box-shadow:0 1px 2px rgba(19,26,36,.08),0 6px 20px rgba(19,26,36,.06); /* NOT a scroller. A wheel here bubbles to the panel, so the same gesture does * the same thing everywhere in it; the page itself is moved by dragging and * by the zoom controls, and scrollLeft/scrollTop still work programmatically * on a hidden overflow. */ overflow:hidden;line-height:0;height:430px;max-height:58vh;cursor:grab} /* A page opened to be READ is sized from the page: 430px is right for an * anchor - the view opens ON the box and a taller window would be empty paper - * and wrong for a document, where it showed the top third and left the rest of * the drawer blank. The height is set from the image's own ratio in pageView * (fitWindow), capped so a long page still fits the screen. */ .pgv.read .pgw{max-height:82vh} .pgw.grab{cursor:grabbing} /* A page that arrived sideways, turned upright in the browser. * * transform does not change layout, so a turned stage would still reserve its * upright box - a tall empty column beside a wide page. `.pgrot.turned` is * given the swapped measurements in script and the stage floats inside it, * pinned to the corner each rotation puts it in. */ /* The rule a finding rests on, quoted under its citation. Folded away by * default: most readers are looking at the document, and a passage that cannot * be closed pushes the evidence off the screen. */ .rulebtn{font:inherit;font-family:var(--mono);font-size:11.5px;color:var(--navy); background:var(--navy-soft);border:1px solid var(--navy-line);border-radius:5px; padding:2px 8px;cursor:pointer;transition:.12s} .rulebtn:hover:not([disabled]){background:var(--surface)} .rulebtn[disabled]{opacity:.5;cursor:default} .ruletext{margin:8px 0 2px;padding:12px 14px;border:1px solid var(--line); border-radius:8px;background:var(--paper);font-size:12.8px;color:var(--ink-2)} .ruletext b{color:var(--ink);font-weight:600} .ruletext .sec{margin-left:8px;color:var(--ink-4);font-size:11.5px} .ruletext .quote{margin:7px 0 0;white-space:pre-wrap;line-height:1.62} .pgrot{position:relative} .pgrot.turned{margin:0 auto} .pgrot.turned > .pgs{position:absolute;top:0;left:0} .pgs{position:relative;width:100%;line-height:0;margin:0 auto;transform-origin:top left} .pgs.r90{transform:rotate(90deg) translateY(-100%)} .pgs.r180{transform:rotate(180deg) translate(-100%,-100%)} .pgs.r270{transform:rotate(270deg) translateX(-100%)} .pgs img{width:100%;height:auto;display:block;-webkit-user-select:none;user-select:none; -webkit-user-drag:none} .abox{position:absolute;border:1.5px solid var(--pos);background:rgba(30,107,82,.10);border-radius:2px} .abox.res{border-color:var(--neg);background:rgba(168,69,43,.10)} .abox b{position:absolute;top:-8px;left:-8px;width:17px;height:17px;border-radius:50%;background:var(--pos); color:#fff;font-family:var(--sans);font-size:9.5px;display:grid;place-items:center;line-height:1} .abox.res b{background:var(--neg)} /* While a page is being fetched and while it cannot be. The frame keeps a * height so the panel does not jump, and a failure says so rather than leaving * a white rectangle that reads as a document with nothing on it. */ .pgload,.pgfail{display:grid;place-items:center;min-height:220px;padding:24px; font-size:12.3px;color:var(--ink-4);text-align:center;line-height:1.6} .pgfail{color:var(--neg);background:var(--neg-soft)} .bb{font-family:var(--mono);font-size:10.3px;color:var(--ink-4);margin-top:10px} .fcard{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh1);padding:18px 20px} .fcard h4{margin:0 0 3px;font-size:14px;font-weight:600;letter-spacing:-.015em} .fcard .fs{font-size:11.5px;color:var(--ink-4);padding-bottom:12px;border-bottom:1px solid var(--line-2)} .ftbl{width:100%;border-collapse:collapse} .ftbl td{padding:8px 0;vertical-align:top;border-bottom:1px solid var(--line-2);font-size:12.3px} .ftbl tr:last-child td{border-bottom:0} .ftbl .tg{font-family:var(--mono);font-size:10.5px;color:var(--navy);width:54px;white-space:nowrap;padding-top:9px} .ftbl .lb{color:var(--ink-3);font-size:11.5px;width:132px;padding-top:9px} .ftbl .vl{font-family:var(--mono);font-size:12px;white-space:pre-line} /* Credit text panel (opened from a version box). */ .ctp{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden} .ctp-h{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line);flex-wrap:wrap} .ctp-h .tt{font-size:13.5px;font-weight:600} .ctp-h .vb{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line);border-radius:5px;padding:2px 8px;color:var(--ink-3)} .ctp-h .cnt{font-size:11.5px;color:var(--ink-4)} .sw{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer;margin-left:auto} .sw input{appearance:none;width:30px;height:17px;border-radius:999px;background:var(--line);position:relative;transition:.16s;cursor:pointer} .sw input::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%; background:#fff;box-shadow:var(--sh1);transition:.16s} .sw input:checked{background:var(--navy)} .sw input:checked::after{transform:translateX(13px)} .sw input[disabled]{opacity:.5;cursor:default} /* NOT a scroller, for the same reason the page viewport is not one: the panel * body already scrolls, and a box inside it with its own 520px window left the * credit text trapped in a small pane with empty panel below it — while the * header truthfully said "26 fields" and eleven were reachable. One scroller * per panel; the content flows down it. */ .scroll{overflow:visible} .ctbl{width:100%;border-collapse:collapse;table-layout:fixed} .ctbl td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:top} .ctbl tr:last-child td{border-bottom:0} .ctbl tr.hit{background:var(--navy-soft)} .ctbl tr.hit .cbody{font-weight:500} .cfld{width:182px} .cfld .cd{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink)} .cfld .cn{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.4} .cwrap{display:flex;gap:12px;align-items:flex-start} .cwrap .lf{flex:1;min-width:0} /* The credit's own text. It was mono 11.7px in --ink-2 and read as a caption * under the panel's own headings - a banker checking which criteria produced a * reserve was squinting at the criteria. Mono stays: SWIFT text is fixed-format * and its alignment carries meaning. */ .cbody{font-family:var(--mono);font-size:13px;color:var(--ink);white-space:pre-wrap; line-height:1.7} .cbody.clip{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} tr.hit .cbody{border-left:2px solid var(--navy);padding-left:10px;font-weight:500} .cmore{background:none;border:0;color:var(--navy);font-size:11px;padding:3px 0 0;text-decoration:underline;text-underline-offset:2px} .cbadge{flex:none;font-size:10.3px;border-radius:5px;padding:2px 7px;white-space:nowrap;margin-top:1px} .cbadge.chg{background:var(--navy);color:#fff} .cbadge.part{background:var(--line-2);color:var(--ink-4)} .cnone{padding:18px 14px;font-size:12.3px;color:var(--ink-4)} /* ---- findings ------------------------------------------------------------ * The reserve list reuses .row wholesale - there is no second row here. What * this block styles is the frame around it: the run's own header, the three * report sections with their counters, and the collapsed passing results. * A passing result is COLLAPSED, never removed: an examination that shows * only what failed cannot be audited. */ .fhead{display:flex;align-items:flex-start;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--line)} .fhead .jid{font-family:var(--mono);font-size:15px;font-weight:500} .fhead .jm{font-size:12.5px;color:var(--ink-3);margin-top:4px} /* The credit, from the top of the report. Not a section's subtitle: it is the * criteria all three sections were measured against. */ .creditbtn{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px; border:1px solid var(--line);border-radius:7px;background:var(--surface); font-family:inherit;font-size:12.5px;color:var(--ink-2);transition:.12s} .creditbtn:hover{border-color:var(--navy-line);background:var(--navy-soft);color:var(--navy)} .creditbtn svg{color:var(--ink-4)} .creditbtn:hover svg{color:var(--navy)} .creditbtn .v{font-family:var(--mono);font-size:11px;color:var(--ink-4)} .creditbtn:hover .v{color:var(--navy)} /* What the examination cost, as a measurement rather than a clause. * * Deliberately the same block as .run .el, which shows the same fact while the * run is still moving: a reader who watched the phases and then opened the * report meets the number in the same place, the same size, the same face. * * margin-left:auto puts it at the far right and .ftools then sits beside it - * the tools keep their own auto only when this block is absent, which is why * the rule below is scoped rather than dropped. */ .fstat{margin-left:auto;text-align:right;flex:none} .fstat .v{font-family:var(--mono);font-size:16px;font-weight:500; font-variant-numeric:tabular-nums;line-height:1.2} .fstat .l{font-size:10px;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-4);font-weight:600;margin-top:2px} /* The wait, when there was one. Quieter than the figure above it: it is * context for that number, not a second number competing with it. */ .fstat .w{font-size:11px;color:var(--ink-4);margin-top:4px;white-space:nowrap} .fstat+.ftools{margin-left:20px} .ftools{margin-left:auto;display:flex;align-items:center;gap:14px} .lang{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden} .lang button{border:0;background:var(--surface);color:var(--ink-3);font-size:12px;padding:5px 11px} .lang button+button{border-left:1px solid var(--line)} .lang button.on{background:var(--ink);color:#fff} .rsec{margin-top:28px} .rsec-h{display:flex;align-items:baseline;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--line)} .rsec-h .rt{font-size:15px;font-weight:600;letter-spacing:-.015em} .rsec-h .rs{font-size:11.5px;color:var(--ink-4);margin-top:2px} /* ---- the rows scroll inside the card -------------------------------------- * A presentation of 49 documents and 40 reserves made the report eight screens * of page scrolling, and the section head - which carries the counters saying * what the list underneath IS ("Valid 14 · Flagged 18 · Not checked 16") - left * the viewport after the third row. A reader deep in a list could no longer see * which list they were in. * * max-height, not height: a section with six rows must not become a tall box * with white space under it. Short lists are unchanged; only the ones that were * causing the scrolling get a scroller. * * Viewport-relative with a ceiling: on a laptop the cap is what bounds the * page, on a tall monitor 620px stops one section from filling a screen the * reader would rather share between two. * * overscroll-behavior stops the wheel from chaining into the page the moment a * list hits its end - the jump that makes a reader lose their place twice. */ .rsec-b{max-height:min(58vh,620px);overflow-y:auto;overscroll-behavior:contain; /* Room for the scrollbar so the last column does not sit under it, and for * the focus ring of the last row, which is otherwise clipped. */ padding-right:2px;margin-right:-2px} .rsec-b::-webkit-scrollbar{width:10px} .rsec-b::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px; border:3px solid var(--surface)} .rsec-b::-webkit-scrollbar-thumb:hover{background:var(--ink-4)} .rsec-b{scrollbar-width:thin;scrollbar-color:var(--line) transparent} .rstats{margin-left:auto;display:flex;gap:16px;font-size:12px;color:var(--ink-3);white-space:nowrap;align-items:baseline} .rstats b{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink); font-variant-numeric:tabular-nums;margin-left:5px} .rstats .ok b{color:var(--pos)} .rstats .no b{color:var(--neg)} .allok{display:flex;align-items:center;gap:9px;padding:14px 8px;font-size:12.8px;color:var(--ink-2)} .allok svg{color:var(--pos);flex:none} .skipn{display:flex;gap:10px;padding:12px 14px;border-radius:8px;background:var(--line-2); font-size:12.5px;color:var(--ink-2);margin-top:12px;line-height:1.5} .skipn svg{color:var(--ink-4);margin-top:1px;flex:none} .skipn .sp{flex:1} /* The control sits IN the note, because the note is what it acts on. Aligned to * the first line rather than centred: the text may wrap and a button drifting * to the middle of a paragraph reads as unrelated to it. */ .skipn .gho{align-self:flex-start;margin:-3px 0} .skipn.warn{background:var(--warn-soft);color:#5C440C} .skipn.warn svg{color:var(--warn)} .skipn.warn b{font-weight:600} /* The way to the next page of the list, under the table it extends. Centred, * because it belongs to the whole list and not to the last row of it. */ .morewrap{display:flex;justify-content:center;padding:14px 0 4px} .morewrap:empty{display:none} /* The gate's "decided by someone else" note carries its way out inline. */ .err .gho.sm{margin-left:8px;vertical-align:middle} .okwrap{margin-top:4px} .okh{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:9px 8px; font-size:12.5px;color:var(--pos);font-weight:500;text-align:left;border-radius:6px} .okh:hover{background:var(--pos-soft)} .okh .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-4)} .okl{display:none;padding-left:8px} .okl.on{display:block} .okr{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line-2); font-size:12.3px;color:var(--ink-2)} .okr:last-child{border-bottom:0} .okr svg{color:var(--pos);flex:none;align-self:flex-start;margin-top:2px} .fc{font-family:var(--mono);font-size:10.3px;border:1px solid var(--line);border-radius:4px; padding:1px 6px;color:var(--ink-3);flex:none} .hidden{display:none!important} .cruxbox{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px; margin:2px 0 16px;flex-wrap:wrap} /* ---- dashboard ----------------------------------------------------------- * The root screen and the only list. What needs a person sits above it; the * two views are the same history read two ways, not two screens. */ .hero{display:flex;align-items:flex-start;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line)} .hero .sp{flex:1} .attn{display:flex;align-items:center;gap:14px;margin-top:20px;padding:14px 16px;border-radius:8px; background:var(--warn-soft)} .attn svg{color:var(--warn);flex:none} .attn .tx{font-size:13px;color:#5C440C} .attn .tx b{font-weight:600} .attn .sp{flex:1} .attn .go{border:1px solid var(--warn-line);background:var(--surface);color:var(--warn); border-radius:7px;padding:7px 14px;font-size:12.5px;font-weight:500} .attn .go:hover{background:#fff} /* The filter row: ONE family. * * It used to hold three: a segmented toggle filled SOLID INK when selected - * the heaviest thing on the screen, heavier than the primary button next to * it - a 7px search box, and 999px pills. Three shapes, three fills, three * radii, for controls that all do one job: decide what the table below shows. * * Now: one height (30px), one radius (7px), and selection is a quiet navy tint * in all of them. An UNSELECTED filter carries no outline at all, because four * outlined chips read as a wall of controls rather than as four words. */ .tools{display:flex;align-items:center;gap:10px;margin-top:20px} .vtog{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;height:30px} .vtog button{border:0;background:var(--surface);color:var(--ink-3);font-size:12.5px;padding:0 13px} .vtog button+button{border-left:1px solid var(--line)} .vtog button:hover:not(.on){background:var(--line-2);color:var(--ink)} .vtog button.on{background:var(--navy-soft);color:var(--navy);font-weight:500} .search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:7px; padding:0 11px;height:30px;background:var(--surface);min-width:240px} .search svg{color:var(--ink-4)} .search input{border:0;outline:0;font-family:inherit;font-size:12.5px;flex:1;background:none; color:var(--ink);min-width:0} .chips{display:flex;gap:2px;margin-left:auto} .chipf{border:1px solid transparent;background:none;border-radius:7px;padding:0 11px;height:30px; font-size:12.5px;color:var(--ink-3);transition:.12s} .chipf:hover:not(.on){background:var(--line-2);color:var(--ink)} .chipf.on{background:var(--navy-soft);border-color:var(--navy-line);color:var(--navy);font-weight:500} .wl{width:100%;border-collapse:collapse;margin-top:16px} .wl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-4); font-weight:600;padding:0 20px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap} /* No fixed width. It was 32% - 330px holding 140px of mono reference - so the * widest column on the screen was the emptiest one, and the eye lost the row * crossing it. The columns take what their content needs. */ .wl th:last-child,.wl td:last-child{padding-right:0} .wl th.r,.wl td.r{text-align:right;white-space:nowrap} /* One line, 44px. It was 65px for one reason: the job id rode as a second line * under the reference. The id has a column now. */ .wl td{padding:0 20px 0 0;height:44px;border-bottom:1px solid var(--line-2); vertical-align:middle;font-size:12.8px;white-space:nowrap} .wl tr.row2{cursor:pointer;transition:background .12s} .wl tr.row2:hover td{background:var(--hover)} .wl .ref{font-family:var(--mono);font-size:12.5px;font-weight:500} /* A credit repeated on the next row is DIMMED, never dropped: still on the * row, still searchable, still copied out of it - just not shouting the same * word three times down the page. */ .wl .ref.rep{color:var(--ink-4);font-weight:400} .wl td.jid{font-family:var(--mono);font-size:11.5px;color:var(--ink-4)} .wl td.pno{font-variant-numeric:tabular-nums;color:var(--ink-2)} /* The Run column is the one that absorbs the table's slack, and it earns it: * it is the only column whose content genuinely varies, and it is where a * failure explains itself. Everything else sizes to its content, so the eye * does not cross an empty 200px between the reference and the next figure. */ /* NOT display:flex - a flex td stops being a table-cell and the column widths * come apart (the table grew 190px wider than its card the moment it was * tried). Plain cell, inline children. */ .wl td.runcell{white-space:nowrap} /* The failure still says why, on one line, truncated to whatever slack the row * has. The whole message is in the title. */ .wl .err1{display:inline-block;max-width:22ch;margin-left:10px;color:var(--neg); font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; vertical-align:middle} .wl .empty-cell{height:auto;padding:26px 0;white-space:normal;color:var(--ink-3);font-size:12.5px} .wl .empty-cell b{display:block;color:var(--ink);font-size:13.5px;font-weight:600;margin-bottom:5px} .wl .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px} .wl .jid{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap} .wl .n{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-2)} .wl .when{font-size:12px;color:var(--ink-3);white-space:nowrap} .wl .when.neg{color:var(--neg)} /* "none" is a verdict and is green; the dash is the absence of one and is * grey. They must never look like the same statement. */ .dz{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;font-weight:500;color:var(--neg)} .dz.zero{color:var(--pos)} .dz.na{color:var(--ink-4);font-weight:400;font-family:var(--sans);font-size:12px} /* Which credit text this run examined. NOT a badge: it had a border and a * radius, so it looked exactly like .rstate beside it and the eye could not * tell "which text" from "what is it doing". Plain type; the box is reserved * for the exception. */ .vset{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);white-space:nowrap} .rstate{display:inline-flex;align-items:center;gap:6px;font-size:11.3px;border-radius:999px; padding:2px 9px;border:1px solid var(--line);background:var(--line-2);color:var(--ink-2); white-space:nowrap} .rstate i{width:5px;height:5px;border-radius:50%;background:currentColor;display:block} .rstate.warn{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn)} .rstate.neg{border-color:var(--neg-line);background:var(--neg-soft);color:var(--neg)} /* Who ran it. Quiet: it is how a reader tells two rows apart on a shared list, * not what the row is about. */ .wl .who{font-size:12px;color:var(--ink-2);white-space:nowrap} .wl .who.na{color:var(--ink-4)} .wl .sub.neg{color:var(--neg)} /* The job id moved under the reference when "Ran by" took its column. It is * diagnostic - said out loud between a log and a support message - so it stays * legible and stays out of the way. */ .wl .sub.jid{font-family:var(--mono);font-size:11px;color:var(--ink-4);margin-top:3px} /* ---- starting an examination --------------------------------------------- * A document row is a checkbox with a name, not a card. Archived documents are * dimmed but never hidden and never unselectable: a report was issued on the * strength of that file existing. */ .pick{margin-top:16px} .picklab{display:flex;align-items:baseline;gap:10px;font-size:12.5px;font-weight:500;color:var(--ink-2); flex-wrap:wrap} .picklab .h{font-size:11.5px;font-weight:400;color:var(--ink-4)} /* The drop zone. The native input stays inside it - it is what keeps the * control keyboard-reachable and gives "Browse…" to the people who never drag - * but the zone owns the drag state, because a gesture performed into silence * cannot be told from one that failed. */ .drop{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px; padding:16px 18px;border:1.5px dashed var(--line);border-radius:9px;background:var(--paper); transition:border-color .12s,background .12s,box-shadow .12s} .drop:hover{border-color:var(--navy-line);background:var(--navy-soft)} .drop.over{border-color:var(--navy);border-style:solid;background:var(--navy-soft); box-shadow:inset 0 0 0 3px rgba(27,58,92,.07)} .drop.over .dh{color:var(--navy)} .drop.off{opacity:.55} .drop.off:hover{border-color:var(--line);background:var(--paper)} .drop .dh{font-size:12.3px;color:var(--ink-4)} .drop input[type=file]{font-family:inherit;font-size:12.3px;color:var(--ink-3); max-width:100%;flex:none} /* The native control, kept for the keyboard and the screen reader and taken * off the screen. ::file-selector-button could be restyled but never * RETITLED - the words are the browser's ("Choose Files", "Gözat…") - and * "No file chosen" beside it cannot be reached at all. * * Not display:none, which would take it out of the tab order with it: 1px and * transparent, under the label that carries our words. */ .drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0; margin:0;padding:0;border:0} .drop .browse{font-size:12.5px;font-weight:500;color:var(--ink-2);background:var(--surface); border:1px solid var(--line);border-radius:7px;padding:7px 15px;cursor:pointer; transition:.12s;flex:none} .drop:hover .browse{border-color:var(--ink-4);color:var(--ink)} /* The focus ring belongs on what the eye sees, not on the 1px input. */ .drop input[type=file]:focus-visible + .browse{outline:2px solid var(--navy);outline-offset:2px} .drop.off .browse{cursor:default;color:var(--ink-4)} /* A file the user just chose. It was grey-on-grey and unremovable; it is the * one thing on this screen they DID, so it reads as a row of its own. */ .pickf{display:flex;align-items:center;gap:9px;margin-top:6px;padding:7px 10px; background:var(--surface);border:1px solid var(--line);border-radius:6px; font-family:var(--mono);font-size:11.5px;color:var(--ink)} .pickf svg{color:var(--ink-3);flex:none} .pickf .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pickf .fz{margin-left:auto;color:var(--ink-4);font-size:10.5px;flex:none} .pickf .x{font:inherit;font-size:15px;line-height:1;color:var(--ink-4);background:none; border:0;border-radius:4px;padding:1px 5px;cursor:pointer;flex:none} .pickf .x:hover{color:var(--neg);background:var(--neg-soft)} /* An upload this credit already holds. Not a failure — the same bill of lading * covers a second presentation — so it is stated, not warned about. */ .already{margin-top:14px;padding:11px 14px;background:var(--navy-soft); border-left:2px solid var(--navy-line);border-radius:0 6px 6px 0; font-size:12.5px;line-height:1.6;color:var(--ink-2)} .already b{color:var(--ink);font-weight:600} .facts{display:flex;flex-wrap:wrap;gap:26px;padding:16px 0 4px} .fact .k{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);font-weight:600} .fact .v{font-size:14px;font-weight:500;margin-top:4px} .fact .v.mono{font-family:var(--mono);font-size:13.5px} /* The one fact that is a chip rather than a number: it keeps the chip's own * type, and sits on the baseline the numbers beside it sit on. */ .fact .v .rstate{vertical-align:middle} .prow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 0 4px} /* Which tender this run goes under, stated. The decision is the credit page's; * this says what arrived with the reader, and offers the way back. * * nowrap on both halves, and the date pushed right with margin rather than a * spacer: the label shrank to 75px and broke "a new tender" over two lines, so * the strip stood two rows high with everything huddled on the left. */ .pstrip{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:16px 0 6px; padding:10px 14px;border:1px solid var(--navy-line);background:var(--navy-soft); border-radius:8px;font-size:13px;color:#26405C} .pstrip b{color:var(--navy);font-weight:600;white-space:nowrap} .pstrip .pnote{color:#436084;white-space:nowrap} .pstrip .pdate{margin-left:auto} .pstrip .pdate .k{font-size:10px;letter-spacing:.11em;text-transform:uppercase; color:var(--ink-4);font-weight:600} /* Matched to the date field beside it: 24px against 29px read as a misaligned * pair rather than two controls on one line. */ .pstrip .gho.sm{padding:6px 12px;font-size:12px} .arow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 2px; border:0;border-top:1px dashed var(--line);background:none;color:var(--navy); font:inherit;font-size:13px;cursor:pointer;transition:.12s} .arow:hover{background:var(--line-2)} .arow .pl{width:16px;text-align:center;color:var(--ink-4);font-family:var(--mono);font-size:12px} .arow .nm{font-weight:500} .prow .k{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4); font-weight:600;margin-right:4px} .docr{display:grid;grid-template-columns:22px minmax(0,1.4fr) minmax(0,1fr);gap:16px; align-items:center;width:100%;text-align:left;background:none;border:0;padding:11px 8px; border-bottom:1px solid var(--line-2);border-radius:6px;transition:background .12s} /* A finished stage. One line where a section was. */ .readline{display:flex;align-items:center;gap:14px;border:1px solid var(--line); border-radius:8px;padding:9px 10px 9px 14px;background:var(--paper);font-size:12.8px} .readline .ref{font-family:var(--mono);font-weight:500} /* Reading. The line breathes rather than spinning: a spinner claims progress * it cannot measure, and this genuinely does not know how long the parse will * take. */ .readline.wait{border-style:dashed} .readline.wait .from{animation:breathe 1.6s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}} .readline .from{color:var(--ink-3);font-size:12px} .readline .sp{flex:1} .gho.sm{padding:4px 11px;font-size:11.5px;border-radius:6px} .docr:hover{background:var(--hover)} /* The MAJORITY is selected here - what you just uploaded, plus what the open * tender already holds - so filling every selected row made the fill the * background of the list and the signal disappear into it. The exception is * the row somebody has taken OUT, and that is what is marked. */ .docr.gone .nm{color:var(--ink-3)} .docr.gone .dm{color:var(--ink-4)} .docr.off{opacity:.62} .docr .nm{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .docr .dm{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* A file and what an examination found inside it. The documents sit BESIDE the * button, never within it: the row is one click target - the whole file goes * in or stays out - and a list inside that target would offer a choice this * screen cannot yet honour. Selection is per file; only the telling is per * document. */ .docw{border-bottom:1px solid var(--line-2)} .docw .docr{border-bottom:0} .docw .inside{margin:0 0 11px 46px} .docw .inside.na,.docw .inside.pending{margin:0 0 11px 46px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---- one credit ------------------------------------------------------------ * The shape the work has: credit -> presentation -> run. A tender is a BLOCK * with its runs inside it, not a row among them - flattening that is what made * twenty-four near-identical rows out of one credit's history. */ .tender{margin-top:20px;border:1px solid var(--line);border-radius:9px;overflow:hidden} /* Less weight than a tender, because it is not one: it is the absence of one. * See credit.js's unattached(). */ .tender-h.quiet{background:none;border-bottom:1px solid var(--line-2)} .tender-h.quiet b{font-weight:500;color:var(--ink-3)} .tender-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--line);font-size:12.8px} .tender-h b{font-weight:600} .tender-h .mt{font-size:12px;color:var(--ink-3)} .tender-h .sp{flex:1} /* One more examination of THIS tender. Quiet, and ALWAYS THERE. * * It was drawn at opacity:0 until the block was hovered, on the theory that a * control on every header is a column of buttons down the page. That theory * cost more than it saved: the only way to discover that this page could start * an examination was to sweep the pointer over the header by accident, and on * a touch screen or by keyboard it did not exist at all. Quiet is a weight; * invisible is an absence, and they are not the same choice. * * Restrained instead: a bordered, surface-coloured control that reads as * secondary next to the credit's own primary button, and steps forward on * hover. */ .tender-h .tnew{display:inline-flex;align-items:center;gap:6px; border:1px solid var(--line);background:var(--surface);color:var(--ink-2); font-size:11.5px;padding:4px 10px;border-radius:6px;transition:.12s;white-space:nowrap} .tender-h .tnew:hover{border-color:var(--navy-line);background:var(--navy-soft);color:var(--navy)} .tender-h .tnew svg{color:var(--ink-4)} .tender-h .tnew:hover svg{color:var(--navy)} .tender .empty{padding:26px 10px} /* A folded tender: header only, and the header is the control that opens it. * The summary sits where the rows would have been read from, so the eye finds * the same information in the same place whether the block is open or shut. */ .tender-h.fold{cursor:pointer;border-bottom:0} .tender-h.fold:hover{background:var(--hover)} /* And open, where it is the control that SHUTS the block. It had neither the * pointer nor the hover, so it read as a heading - a reader who never * discovers that a header folds scrolls past five open presentations. */ .tender-h.opened{cursor:pointer} .tender-h.opened:hover{background:var(--hover)} .tender-h svg{color:var(--ink-3);flex:0 0 auto;transition:transform .12s} .tender-h.fold svg{transform:rotate(90deg)} .tender-h.opened svg{transform:rotate(-90deg)} .tender-h .sum{color:var(--ink-2)} /* The run table inside a tender: the same component as the dashboard's, one * step quieter, and inset so the block reads as its container. */ .wl.inner{margin:0} .wl.inner th{padding:12px 20px 9px 16px;border-bottom:1px solid var(--line-2)} .wl.inner td{padding:11px 20px 11px 16px} .wl.inner tr:last-child td{border-bottom:0} /* The library. A file is a line; what an examination found INSIDE it is an * indented list under that line - the file is what was uploaded, the documents * are what it turned out to be, and the indent is the whole distinction. */ /* ---- the library ------------------------------------------------------ * * DOCUMENTS, under the file they came from, with the pages each one occupies * ruled off on its row. Three commercial invoices collapsing into one is * visible as three page ranges or not at all - and that collapse is the * engine's most expensive failure. * * The slots are NOT thumbnails. A 36-page file would be 36 image requests on * a screen nobody has asked to look at pages on; the slot says where the page * IS, and the image arrives in the panel when it is opened. * * `.inside` stays: new.js's selection list still draws it. */ .libhead{display:flex;align-items:baseline;gap:12px;margin-top:34px;padding-bottom:9px; border-bottom:1px solid var(--line)} .libhead b{font-size:13.5px;font-weight:600} .libhead .mt{font-size:12px;color:var(--ink-3)} .libhead .sp{flex:1} .lfile,.lunknown{margin-top:2px} /* The file row is a control too: it opens the file itself, leafed through as * a file. Explicit background for the same reason .ldoc has one - it is a *