/* Each look's fonts, and the touches its colours alone can't make. The colours are in themes.css (generated from
   app/themes.py); this file is written by hand. The fonts are served from static/fonts, because the page's
   Content-Security-Policy only allows fonts from this site; each one's licence (SIL Open Font License) is beside it.
   A browser only downloads a font a page uses, so each look costs just its own. */

/* ---------------------------------------------------------------- fonts */
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-var.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-var.woff") format("woff"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-var.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* one weight only: it stands in for heavier ones rather than being faked bold */
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Regular.woff") format("woff"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff") format("woff"); font-weight: 100 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.woff") format("woff"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/AtkinsonHyperlegibleNext-var.woff") format("woff"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Rethink Sans"; src: url("../fonts/RethinkSans-var.woff") format("woff"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/Onest-var.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/PublicSans-var.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("../fonts/AlbertSans-var.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-var.woff") format("woff"); font-weight: 200 800; font-style: normal; font-display: swap; }

/* app.css turns on two of Inter's alternate letters; in other fonts those switches mean something else */
html[data-theme]:not([data-theme="main"]) body { font-feature-settings: normal; }

/* Screen only: printing is plain whatever the look (themes.css puts the light colours back for print). */
@media screen {

/* ---------------------------------------------------------------- Forest: a deep green sidebar */
/* light text on the green; a night look that's showing brings its own dark sidebar instead */
:is([data-theme="forest"], [data-theme="forest_greenhouse"]):not([data-mode="night"]) .sidebar {
  --ink: #ffffff; --ink-2: #d8ebe4; --ink-3: #9dbfb4; --muted-tint: #17483f; --rule: #22564a;
  --canopy: #8fe0c0; --canopy-tint: #1b5246; --canopy-dark: #ffffff; --alert: #c9372c; --on-alert: #ffffff;
  --focus: #8fe0c0; --focus-ring: rgba(143, 224, 192, 0.3);
  border-right-color: #0a2c26;
}
@media (prefers-color-scheme: dark) {
  :is([data-theme="forest"], [data-theme="forest_greenhouse"])[data-night][data-mode="device"] .sidebar {
    --ink: inherit; --ink-2: inherit; --ink-3: inherit; --muted-tint: inherit; --rule: inherit;
    --canopy: inherit; --canopy-tint: inherit; --canopy-dark: inherit; --alert: inherit; --on-alert: inherit;
    --focus: inherit; --focus-ring: inherit;
    border-right-color: var(--rule);
  }
}

/* ---------------------------------------------------------------- section chips: Greenhouse, Studio, Forest + Greenhouse */
/* each section's icon sits on its own colour, so the parts of the business are easy to tell apart at a glance */
:is([data-theme="greenhouse"], [data-theme="studio"], [data-theme="forest_greenhouse"]) .sidebar .nav-icon {
  width: 26px; height: 26px; padding: 5px; border-radius: 8px;
  background: var(--chip-bg, var(--muted-tint)); color: var(--chip, var(--ink-2));
}
/* the guide line under an open section still runs from the middle of its (now bigger) icon */
:is([data-theme="greenhouse"], [data-theme="studio"], [data-theme="forest_greenhouse"]) .nav-section-items { margin-left: 22px; padding-left: 14px; }
.nav-icon[data-icon="today"] { --chip-bg: var(--tone-today-bg); --chip: var(--tone-today); }
.nav-icon[data-icon="metrc"] { --chip-bg: var(--tone-metrc-bg); --chip: var(--tone-metrc); }
.nav-icon[data-icon="deadlines"] { --chip-bg: var(--tone-deadlines-bg); --chip: var(--tone-deadlines); }
.nav-icon[data-icon="inventory"] { --chip-bg: var(--tone-inventory-bg); --chip: var(--tone-inventory); }
.nav-icon[data-icon="cultivation"] { --chip-bg: var(--tone-cultivation-bg); --chip: var(--tone-cultivation); }
.nav-icon[data-icon="manufacturing"] { --chip-bg: var(--tone-manufacturing-bg); --chip: var(--tone-manufacturing); }
.nav-icon[data-icon="quality"] { --chip-bg: var(--tone-quality-bg); --chip: var(--tone-quality); }
.nav-icon[data-icon="distribution"] { --chip-bg: var(--tone-distribution-bg); --chip: var(--tone-distribution); }
.nav-icon[data-icon="finance"] { --chip-bg: var(--tone-finance-bg); --chip: var(--tone-finance); }
.nav-icon[data-icon="compliance"] { --chip-bg: var(--tone-compliance-bg); --chip: var(--tone-compliance); }
.nav-icon[data-icon="reports"] { --chip-bg: var(--tone-reports-bg); --chip: var(--tone-reports); }
.nav-icon[data-icon="team"] { --chip-bg: var(--tone-team-bg); --chip: var(--tone-team); }
.nav-icon[data-icon="settings"] { --chip-bg: var(--tone-settings-bg); --chip: var(--tone-settings); }

/* ---------------------------------------------------------------- Greenhouse: soft sheets without outlines */
:is([data-theme="greenhouse"], [data-theme="forest_greenhouse"]) .panel {
  border-color: transparent; box-shadow: 0 1px 2px rgba(28, 42, 35, 0.06), 0 8px 24px rgba(28, 42, 35, 0.05);
}
/* the page you're on is a white pill in the sidebar */
[data-theme="greenhouse"] .nav-link.active { background: var(--sheet); box-shadow: 0 1px 2px rgba(28, 42, 35, 0.08), 0 2px 8px rgba(28, 42, 35, 0.06); }

/* ---------------------------------------------------------------- Label Stock: built like a shipping label */
[data-theme="label_stock"] { --edge: 2px; }
[data-theme="label_stock"][data-variant="calm"] { --edge: 1.5px; }
[data-theme="label_stock"] .panel { border: var(--edge) solid var(--rule-strong); }
[data-theme="label_stock"] .sidebar { border-right: var(--edge) solid var(--rule-strong); }
[data-theme="label_stock"] .topbar { border-bottom: var(--edge) solid var(--rule-strong); }
[data-theme="label_stock"]:not([data-variant="calm"]) :is(.btn:not(.btn-quiet), input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=date], input[type=datetime-local], input[type=search], input[type=tel], select, textarea) { border-width: 1.5px; }
/* the top-level menu rows a step bolder than the links inside them, at Barlow's usual width */
[data-theme="label_stock"] :is(.side-nav > .nav-link, .nav-top > .nav-link, .nav-section-head) { font-weight: 600; }
/* each box's heading is a black band, like the strip across the top of a label; what sits on it turns light */
[data-theme="label_stock"]:not([data-variant="calm"]) .panel-head {
  background: #000000; color: #ffffff; border-bottom: 0;
  border-radius: calc(var(--radius-panel) - var(--edge)) calc(var(--radius-panel) - var(--edge)) 0 0;
  --ink: #ffffff; --ink-2: #e6e6e6; --ink-3: #d4d4d4; --link: #ffd400; --focus: #ffd400; --focus-ring: rgba(255, 212, 0, 0.35);
  --sheet: #000000; --sheet-2: #262626; --rule: #4d4d4d; --rule-strong: #ffffff; --info-tint: #262626; --muted-tint: #262626;
  --canopy: #ffd400; --canopy-dark: #ffe14d; --on-accent: #000000;
  --alert: #ff8a7a; --on-alert: #000000; --signal-ink: #ffd400; --good: #7ee2a8; --info: #9cc0ff;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
}
/* calm: a paper-tone band and a thinner rule under it */
[data-theme="label_stock"][data-variant="calm"] .panel-head {
  background: var(--muted-tint); border-bottom: var(--edge) solid var(--rule-strong); --ink-3: var(--signal-ink);
  border-radius: calc(var(--radius-panel) - var(--edge)) calc(var(--radius-panel) - var(--edge)) 0 0;
}

} /* @media screen */

/* ---------------------------------------------------------------- page layouts (app/themes.py, Theme.family)
   On a phone every look keeps the menu that slides in; these apply on wider screens. */
@media screen and (min-width: 861px) {

/* rail (Focus Flow): a slim column of icons that opens over the page when you point at it or tab into it */
[data-family="rail"] .app { grid-template-columns: 76px minmax(0, 1fr); }
[data-family="rail"] .sidebar { width: 76px; padding: 16px 12px 20px; z-index: 40; overflow-x: hidden; transition: width 0.18s ease, box-shadow 0.18s ease; }
[data-family="rail"] .sidebar:is(:hover, :focus-within) { width: var(--sidebar-w); box-shadow: var(--shadow-pop); }
[data-family="rail"] .sidebar :is(.nav-link, .nav-section-head, .brand) { white-space: nowrap; }
[data-family="rail"] .sidebar :is(.side-nav > .nav-link, .nav-top > .nav-link, .nav-section-head) { padding-left: 17px; min-height: 44px; position: relative; }
[data-family="rail"] .sidebar .nav-icon { width: 18px; height: 18px; }
[data-family="rail"] .brand { padding: 2px 9px 16px; }
[data-family="rail"] .sidebar:not(:hover):not(:focus-within) :is(.nav-label, .nav-section-name, .brand-name, .nav-chevron, .sidebar-foot) { opacity: 0; }
[data-family="rail"] .sidebar:not(:hover):not(:focus-within) .nav-section-items { display: none; }
/* folded, a count sits on its icon's corner */
[data-family="rail"] .sidebar:not(:hover):not(:focus-within) .nav-badge { position: absolute; left: 31px; top: 3px; min-width: 17px; padding: 0 4px; font-size: 0.6667rem; line-height: 17px; }

/* top navigation (Ledger): the menu runs across the top; each section's links drop down from it */
[data-family="topnav"] .app { grid-template-columns: minmax(0, 1fr); }
[data-family="topnav"] .sidebar { position: relative; top: auto; height: auto; overflow: visible; z-index: 30; flex-direction: row; flex-wrap: wrap;
  align-items: center; gap: 0 20px; padding: 0 28px; border-right: 0; border-bottom: 1px solid var(--rule); }
[data-family="topnav"] .brand { padding: 10px 0; }
[data-family="topnav"] .side-nav { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 0 2px; }
[data-family="topnav"] .nav-top { display: contents; }
[data-family="topnav"] :is(.side-nav > .nav-link, .nav-top > .nav-link, .nav-section-head) { height: 52px; margin: 0; padding: 0 10px; border-radius: 0;
  border-bottom: 3px solid transparent; gap: 7px; }
[data-family="topnav"] :is(.side-nav > .nav-link, .nav-top > .nav-link).active { background: none; border-bottom-color: var(--canopy); }
[data-family="topnav"] :is(.side-nav > .nav-link, .nav-top > .nav-link).active::before { display: none; }
[data-family="topnav"] .nav-section.is-current > .nav-section-head { border-bottom-color: var(--canopy); font-weight: 600; }
[data-family="topnav"] .nav-chevron { transform: rotate(90deg); }
[data-family="topnav"] .nav-section[open] > .nav-section-head .nav-chevron { transform: rotate(-90deg); }
[data-family="topnav"] .nav-section { position: relative; }
[data-family="topnav"] .nav-section-items { position: absolute; top: 100%; left: 0; z-index: 35; min-width: 230px; margin: 4px 0 0; padding: 6px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); box-shadow: var(--shadow-pop); }
[data-family="topnav"] .nav-section-items .nav-link { padding: 8px 10px; border-radius: 6px; }
[data-family="topnav"] .nav-section-items .nav-link.active::before { display: none; }
[data-family="topnav"] .sidebar-foot { display: none; }
[data-family="topnav"] .topbar { padding-left: 28px; padding-right: 28px; }
[data-family="topnav"] .content { margin: 0 auto; }

/* floating (Studio): the menu is a card of its own, with the page showing around it */
[data-family="floating"] .app { grid-template-columns: calc(var(--sidebar-w) + 24px) minmax(0, 1fr); }
[data-family="floating"] .sidebar { top: 16px; height: calc(100vh - 32px); margin: 16px 8px 16px 16px; border: 0; border-radius: 24px; background: var(--sheet);
  box-shadow: 0 1px 2px rgba(34, 31, 51, 0.05), 0 10px 30px rgba(34, 31, 51, 0.06); }
[data-family="floating"] :is(.nav-link, .nav-section-head) { border-radius: 12px; }
[data-family="floating"] .topbar { border-bottom: 0; }

} /* page layouts */
/* an open section in the top navigation isn't animated open (its links drop down instead) */
@media screen and (min-width: 861px) {
  [data-family="topnav"] .nav-section::details-content { block-size: auto; overflow: visible; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-family="rail"] .sidebar { transition: none; }
}

/* Ledger: a navy menu bar. Its section menus drop down onto white, so they take the page's own colours back. */
[data-theme="ledger"] { --page-ink: var(--ink); --page-ink-2: var(--ink-2); --page-ink-3: var(--ink-3); --page-muted: var(--muted-tint);
  --page-canopy: var(--canopy); --page-canopy-tint: var(--canopy-tint); --page-canopy-dark: var(--canopy-dark); --page-rule: var(--rule);
  --page-focus: var(--focus); --page-focus-ring: var(--focus-ring); }
@media screen {
  [data-theme="ledger"] .sidebar { background: #17345c; border-color: #10284a;
    --ink: #ffffff; --ink-2: #dbe5f3; --ink-3: #b9c8de; --muted-tint: #21446f; --rule: #2c4f7c; --canopy: #ffffff; --canopy-tint: #21446f;
    --canopy-dark: #ffffff; --focus: #ffffff; --focus-ring: rgba(255, 255, 255, 0.3); }
}
@media screen and (min-width: 861px) {
  [data-theme="ledger"] .nav-section-items { --ink: var(--page-ink); --ink-2: var(--page-ink-2); --ink-3: var(--page-ink-3); --muted-tint: var(--page-muted);
    --rule: var(--page-rule); --canopy: var(--page-canopy); --canopy-tint: var(--page-canopy-tint); --canopy-dark: var(--page-canopy-dark);
    --focus: var(--page-focus); --focus-ring: var(--page-focus-ring); }
}