/* THE METRC (DISPENSARY) MODE PAGE (pages/01_what-metrc-dispensary.php): the four workflows as cards, the way of a file to Metrc
   in four steps, the files table, the planned live link and the legal box - in the teal of the DISPENSARY MODE in the app.
   (site.css comes after this file and has the shared parts: .pageHead, .section, .cards, .card, .feat, .ticks, .flow, .saves, .phone,
   .shots, .ed, .checkTable, .cardTable, .tipBox) */

:root {
	--mtr: #00695c;
	--mtr-dark: #004d40;
	--mtr-soft: #e6f3f1;
	--mtr-line: #bfdcd7;
}

/* the four workflows: two cards in a row, one on phones */
.mtrFlows {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 22px;}
.mtrFlow {background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--mtr); border-radius: 16px; padding: 22px 24px 18px; display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(40, 55, 10, 0.05);}
.mtrFlow h3 {font-family: var(--pixel); font-size: 12px; line-height: 1.7; color: var(--mtr-dark); margin: 0 0 10px; font-weight: normal;}
.mtrFlow h3 .mtrIcon {font-family: var(--text); font-size: 1.35rem; margin-right: 6px; vertical-align: -2px;}
.mtrFlow p {margin: 0 0 10px; color: #3c4533; font-size: 0.98rem;}
.mtrFlow .ticks {margin: 0 0 12px;}
.mtrFlow .ticks li {font-size: 0.95rem;}
.mtrFlow .mtrTo {margin: auto 0 0; padding: 10px 12px; border-radius: 10px; background: var(--mtr-soft); border: 1px solid var(--mtr-line); font-size: 0.9rem; color: var(--mtr-dark);}
.mtrFlow .mtrTo b {color: var(--mtr-dark);}

/* set up once: a framed box with the numbered steps of .flow */
.mtrOnce {background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px 8px; margin: 0 0 16px; box-shadow: 0 2px 6px rgba(40, 55, 10, 0.04);}
.mtrOnce h3 {font-size: 1.08rem; color: var(--brand-dark); margin: 0 0 6px;}
.mtrOnce .flow li::before {background: var(--mtr-soft); color: var(--mtr-dark);}

/* the way of a file to Metrc: four steps (two by two on tablets, one column on phones) */
.mtrSteps {list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: mst;}
.mtrSteps li {counter-increment: mst; position: relative; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px 14px; font-size: 0.95rem; color: #3c4533; box-shadow: 0 2px 6px rgba(40, 55, 10, 0.04);}
.mtrSteps li::before {content: counter(mst); display: block; width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 50%; background: var(--mtr); color: #fff; font-family: var(--pixel); font-size: 11px; margin: 0 0 10px;}
.mtrSteps li b {display: block; color: var(--mtr-dark); margin: 0 0 4px;}

/* a note in the teal of the mode */
.mtrNote {background: var(--mtr-soft); border: 1px solid var(--mtr-line); border-radius: 12px; padding: 14px 18px; margin: 0 0 16px; color: #23403a; font-size: 0.97rem;}
.mtrNote b {color: var(--mtr-dark);}
.mtrNote p {margin: 0 0 8px;}
.mtrNote p:last-child {margin-bottom: 0;}

/* the files table: the Metrc upload type in bold teal */
.checkTable.mtrFiles td:first-child {color: var(--mtr-dark);}
.mtrFiles .mtrNo {color: #a07000; font-weight: 700;}

/* the planned live link of the 232 UP↑SCALER: a dashed box with a PLANNED tag */
.mtrPlanned {position: relative; background: #fff; border: 2px dashed #8f80c8; border-radius: 16px; padding: 26px 24px 18px; margin: 10px 0 16px;}
.mtrPlanned .mtrPill {position: absolute; top: -13px; left: 20px;}
.mtrPlanned p {margin: 0 0 10px; color: #3c4533;}
.mtrPlanned p.mtrSentence {font-size: 1.08rem; color: var(--ink);}
.mtrPill {display: inline-block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; background: #4a3a78; color: #fff; box-shadow: 0 2px 0 #2a2046;}

/* the legal box */
.mtrLegal {background: #fffbe0; border: 1px solid #efe08a; border-radius: 16px; padding: 18px 22px 14px; margin: 0 0 16px;}
.mtrLegal .ticks {margin-bottom: 8px;}

@media (max-width: 900px) {
	.mtrSteps {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 700px) {
	.mtrFlows, .mtrSteps {grid-template-columns: 1fr;}
	.mtrFlow, .mtrOnce, .mtrLegal {padding-left: 16px; padding-right: 16px;}
	.mtrPlanned {padding: 24px 16px 14px;}
}