/* drawn product cards, generated from marketing/assets/mockups.py */

.mk { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; color: #0B2230; line-height: 1.35; }
.mk * { box-sizing: border-box; margin: 0; padding: 0; }
.mk .card { background: #fff; border-radius: .7em; padding: 1.1em 1.3em; border: 1px solid #DCE5E8;
             box-shadow: 0 .1em .25em rgba(11,34,48,.05), 0 1.2em 2.8em rgba(11,34,48,.13); }
.mk .ttl { font-size: .72em; letter-spacing: .09em; text-transform: uppercase; color: #5B6B76; font-weight: 650; }
.mk h5 { font-size: 1.15em; font-weight: 650; margin: .15em 0 .7em; display: flex; align-items: center; gap: .5em; }
.mk .muted { color: #5B6B76; }
.mk .small { font-size: .8em; }
.mk .row { display: grid; grid-template-columns: 2.2em 1fr 5.6em 3.6em; gap: .7em; align-items: center;
            padding: .55em 0; border-top: 1px solid #EEF2F4; }
.mk .row .no { color: #8a95a0; font-size: .9em; }
.mk .row .lbl small { display: block; color: #5B6B76; font-size: .78em; }
.mk .in { border: 1px solid #DCE5E8; border-radius: .35em; padding: .3em .55em; text-align: right;
           font-variant-numeric: tabular-nums; font-weight: 600; background: #fff; }
.mk .in.fail { border-color: #C23B3B; background: #FBE7E7; color: #C23B3B; }
.mk .in.ok { border-color: #BFE6D3; background: #F3FBF7; }
.mk .pill { display: inline-block; font-weight: 700; font-size: .8em; text-align: center; border-radius: .35em;
             padding: .2em .5em; white-space: nowrap; }
.mk .pill.ok { background: #E4F6EE; color: #0f7a50; }
.mk .pill.fail { background: #FBE7E7; color: #C23B3B; }
.mk .pill.open { background: #FDF3DD; color: #9A6A06; }
.mk .pill.violet { background: #5B3FD1; color: #fff; }
.mk .pill.review { background: #FFF6CC; color: #7A5D00; }
.mk .hint { grid-column: 2 / -1; color: #C23B3B; font-size: .8em; margin-top: -.25em; }
.mk .dot { width: .6em; height: .6em; border-radius: 50%; display: inline-block; flex: none; }
.mk .dot.ok { background: #1DB57A; } .mk .dot.fail { background: #C23B3B; } .mk .dot.open { background: #D89A1C; }
.mk .dot.review { background: #E0B000; box-shadow: 0 0 0 .2em #FFF6CC; }
.mk .sum { display: flex; justify-content: space-between; align-items: center; margin-top: .8em; padding-top: .8em;
            border-top: 1px solid #DCE5E8; font-weight: 600; }
.mk .btn { display: inline-block; border-radius: .4em; padding: .45em .9em; font-weight: 650; font-size: .9em; }
.mk .btn.primary { background: #0F6B7A; color: #fff; }
.mk .btn.ghost { border: 1px solid #DCE5E8; color: #0B2230; background: #fff; }
.mk .btn.review { background: #E0B000; color: #3D2F00; }
.mk .banner { background: #FBE7E7; color: #8E2424; border-radius: .45em; padding: .6em .8em; font-size: .9em; margin: .2em 0 .9em; }
.mk .list > div { display: flex; justify-content: space-between; gap: 1em; padding: .5em 0; border-top: 1px solid #EEF2F4; font-size: .92em; }
.mk .arrow { color: #0F6B7A; font-size: 1.6em; font-weight: 700; text-align: center; line-height: 1; }
.mk .stack { display: flex; flex-direction: column; gap: .9em; }

/* chain */
.mk .node { display: grid; grid-template-columns: 2.6em 1fr auto; gap: .9em; align-items: center; }
.mk .node .ic { width: 2.6em; height: 2.6em; border-radius: .6em; background: #E6F2F3; color: #0F6B7A; display: flex;
                 align-items: center; justify-content: center; font-weight: 750; font-size: .95em; }
.mk .node b { display: block; font-size: 1.05em; }
.mk .link { margin-left: 1.25em; border-left: .15em dashed #B9CDD3; height: 1.4em; }

/* signature */
.mk .sig { border: 1px solid #BFE6D3; background: #F3FBF7; border-radius: .5em; padding: .7em .9em; }
.mk .sig .name { font-family: "Segoe Script", "Lucida Handwriting", cursive; font-size: 1.45em; color: #0B2230; }
.mk .audit > div { display: grid; grid-template-columns: 3.4em 1fr; gap: .8em; padding: .5em 0; border-top: 1px solid #EEF2F4;
                    font-size: .9em; }
.mk .audit .t { color: #5B6B76; font-variant-numeric: tabular-nums; }
.mk s { color: #5B6B76; }

/* review (version change) */
.mk .split { display: grid; grid-template-columns: 11em 1fr; gap: 1.1em; }
.mk .nav > div { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .45em .6em;
                  border-radius: .4em; font-size: .9em; }
.mk .nav > div.cur { background: #E6F2F3; font-weight: 650; }
.mk .changed { background: #FFF6CC; border: 1px solid #F0D772; border-radius: .5em; padding: .2em .7em .7em; margin: .3em -.7em; }
.mk .changed .note { display: flex; justify-content: space-between; align-items: center; gap: .8em; font-size: .82em;
                      color: #6B5200; margin-top: .2em; }

/* documents */
.mk .doc { background: #fff; border: 1px solid #DCE5E8; border-radius: .3em; padding: 1em; box-shadow: 0 .8em 2em rgba(11,34,48,.12);
            position: relative; }
.mk .doc .bar { height: .45em; border-radius: .2em; background: #E3E9EC; margin: .45em 0; }
.mk .doc .tbl { display: grid; grid-template-columns: 1fr 2.4fr 1.2fr 1fr; gap: 2px; margin-top: .7em; }
.mk .doc .tbl i { height: 1.1em; background: #EEF2F4; }
.mk .doc .tbl i.h { background: #D5DEE2; }
.mk .badge { position: absolute; right: -.6em; top: -.6em; border-radius: .35em; padding: .25em .55em; font-size: .75em;
              font-weight: 750; color: #fff; }
.mk .flow { display: grid; grid-template-columns: 1fr 2.2em 1.45fr; gap: .6em; align-items: center; }
.mk .opt { display: inline-flex; align-items: center; gap: .3em; font-size: .85em; color: #5B6B76; margin-left: .8em; }
.mk .opt::before { content: ""; width: .8em; height: .8em; border: 1.5px solid #9AA8B0; border-radius: 50%; }
.mk .opt.on::before { border-color: #1DB57A; background: radial-gradient(circle, #1DB57A 45%, #fff 50%); }
.mk .soll { font-size: .75em; color: #0F6B7A; background: #E6F2F3; border-radius: .3em; padding: .1em .4em; margin-left: .4em; font-weight: 600; }

/* editor */
.mk .ed { border: 1.5px dashed transparent; border-radius: .35em; padding: .1em .3em; }
.mk .ed.sel { border-color: #0F6B7A; background: #F2F9FA; }
.mk .grip { color: #B3C0C6; letter-spacing: -.15em; font-weight: 800; }
.mk .panel { background: #F5F8F9; border-radius: .5em; padding: .8em .9em; font-size: .88em; }
.mk .panel > div { display: flex; justify-content: space-between; padding: .3em 0; border-top: 1px solid #DCE5E8; }
.mk .panel > div:first-of-type { border-top: 0; }

/* mail rules */
.mk .rule { display: grid; grid-template-columns: 1fr auto; gap: .2em 1em; align-items: center; padding: .65em 0;
             border-top: 1px solid #EEF2F4; }
.mk .rule small { color: #5B6B76; font-size: .82em; }
.mk .tog { width: 2.3em; height: 1.3em; border-radius: 1em; background: #1DB57A; position: relative; grid-row: span 2; }
.mk .tog::after { content: ""; position: absolute; right: .17em; top: .17em; width: .96em; height: .96em; border-radius: 50%; background: #fff; }

/* versions */
.mk .vers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.mk .ver { background: #F5F8F9; border-radius: .6em; padding: .7em; }
.mk .ver.cur { background: #E6F2F3; box-shadow: inset 0 0 0 1.5px #0F6B7A; }
.mk .vh { margin-bottom: .5em; }
.mk .vh b { display: block; font-size: 1.05em; }
.mk .vh span { color: #5B6B76; font-size: .8em; }
.mk .rec { display: flex; align-items: center; gap: .5em; background: #fff; border: 1px solid #DCE5E8; border-radius: .4em;
            padding: .35em .55em; margin-top: .4em; font-size: .88em; font-variant-numeric: tabular-nums; }

/* dashboard */
.mk .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; margin: .6em 0 .8em; }
.mk .kpi { background: #F5F8F9; border-radius: .5em; padding: .55em .7em; font-size: .85em; color: #5B6B76; }
.mk .kpi b { display: block; font-size: 1.7em; line-height: 1.1; color: #0B2230; }
.mk .kpi b.good { color: #0f7a50; } .mk .kpi b.bad { color: #C23B3B; }
.mk .bars { display: flex; align-items: flex-end; gap: .4em; height: 5.2em; border-bottom: 1px solid #DCE5E8; margin-bottom: .7em; }
.mk .bars i { flex: 1; border-radius: .2em .2em 0 0; background: linear-gradient(#E06666 0 var(--f), #1DB57A var(--f) 100%); }

/* measurement table */
.mk .mt { display: grid; grid-template-columns: 1fr repeat(3, 4.4em); gap: .45em .6em; align-items: center; }
.mk .mt .h { font-size: .72em; color: #5B6B76; text-align: right; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.mk .mt .lbl small { display: block; color: #5B6B76; font-size: .78em; }

/* printed pages (PDF report, emergency copy) */
.mk .sheet { background: #fff; border-radius: .25em; padding: 1.7em 1.6em 1.2em; box-shadow: 0 1em 2.6em rgba(0,0,0,.28);
              aspect-ratio: 1 / 1.32; display: flex; flex-direction: column;
              font-size: .82em; }
.mk .sheet .head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #0F6B7A;
                    padding-bottom: .7em; margin-bottom: .9em; }
.mk .sheet .head b { display: block; font-size: 1.35em; }
.mk .meta { display: grid; grid-template-columns: auto 1fr; gap: .35em 1em; margin-bottom: 1em; }
.mk .meta span:nth-child(odd) { color: #5B6B76; }
.mk .meta .blank { border-bottom: 1px solid #9AA8B0; min-height: 1.2em; }
.mk .ptbl { display: grid; grid-template-columns: 2.4em 1fr 6.2em 3.6em 3.8em; border-top: 1px solid #DCE5E8; align-items: center; }
.mk .ptbl > span { padding: .38em .3em; border-bottom: 1px solid #DCE5E8; }
.mk .ptbl .h { font-weight: 700; font-size: .85em; background: #F5F8F9; align-self: stretch; }
.mk .ptbl .box { display: block; border: 1px solid #9AA8B0; border-radius: .15em; height: 1.3em; }
.mk .cb { display: inline-block; width: .9em; height: .9em; border: 1px solid #9AA8B0; vertical-align: -.1em; }
.mk .signs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; margin-top: 2.4em; }
.mk .signs > div { border-top: 1px solid #9AA8B0; padding-top: .3em; color: #5B6B76; font-size: .85em; position: relative; }
.mk .signs .name { position: absolute; bottom: 100%; left: .2em; font-family: "Segoe Script", "Lucida Handwriting", cursive;
                    color: #0B2230; font-size: 1.35em; }
.mk .foot { margin-top: auto; padding-top: 1.6em; color: #5B6B76; font-size: .75em; display: flex; justify-content: space-between; }

/* data location */
.mk .facts > div { display: flex; justify-content: space-between; gap: 1em; padding: .65em 0; border-top: 1px solid #EEF2F4; }
.mk .ch { width: 1.8em; height: 1.8em; border-radius: .35em; background: #D52B1E; position: relative; flex: none; }
.mk .ch::before, .mk .ch::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mk .ch::before { width: 1.1em; height: .34em; } .mk .ch::after { width: .34em; height: 1.1em; }