:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #183126;
  background: #f2f6f1;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  padding: 2rem 1rem;
}

main {
  width: min(52rem, 100%);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid #d5dfd2;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1rem 3rem rgb(24 49 38 / 8%);
}

h1 { margin-top: 0; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; }
h2 { margin-top: 2rem; }
p, li { line-height: 1.65; }
a { color: #175c34; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }

.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  font-weight: 700;
  color: #275d3a;
  background: #e5f4e9;
}

.status::before {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: #2c8a4b;
  content: "";
}

.notice { padding: .8rem 1rem; border-left: .3rem solid #2c8a4b; background: #eef7f0; }
.warning { border-color: #a86f00; background: #fff7e3; }
.small { font-size: .9rem; color: #4b5f55; }
label { display: block; margin: 1rem 0 .35rem; font-weight: 700; }
input { width: 100%; padding: .75rem; font: inherit; }
input[type="checkbox"] { width: auto; margin-right: .5rem; }
button { margin-top: 1rem; padding: .75rem 1rem; border: 0; border-radius: .4rem; color: #fff; background: #275d3a; font: inherit; font-weight: 700; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.actions form, .actions button { margin: 0; }
code { overflow-wrap: anywhere; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem .5rem; border-bottom: 1px solid #d5dfd2; text-align: left; vertical-align: top; }

/* Read-only morning overview; keep its layout isolated from other workspaces. */
main:has(> .morning-pick) { max-width: 1100px; margin: auto; padding: 24px; }
.morning-pick h1 { margin-bottom: 8px; }
.morning-pick .notice { background: #eef4f1; padding: 14px; border-radius: 12px; }
.morning-pick .metrics { display: flex; flex-wrap: wrap; gap: 12px; }
.morning-pick .metrics div { border: 1px solid #d8e3de; border-radius: 12px; padding: 14px; flex: 1; min-width: 110px; }
.morning-pick .metrics dt { font-size: .85rem; }
.morning-pick .metrics dd { font-size: 1.4rem; margin: 4px 0; }
.morning-pick section { margin: 24px 0; }
.morning-pick .pick-list { list-style: none; padding: 0; }
.morning-pick .pick-row { padding: 16px; border: 1px solid #d8e3de; border-radius: 12px; margin: 10px 0; overflow-wrap: anywhere; }
.morning-pick .pick-row > div { display: flex; justify-content: space-between; gap: 16px; }
.morning-pick .amount { white-space: nowrap; }
.morning-pick .pick-row p { margin: 8px 0; }
.morning-pick .note { white-space: pre-wrap; }
.morning-pick .attention { color: #864809; }
.morning-pick details { margin-top: 12px; }
.morning-pick summary { cursor: pointer; padding: 6px 0; }
.morning-pick dd { margin: 0 0 10px; }

@media (max-width: 600px) {
  main:has(> .morning-pick) { padding: 12px; }
  .morning-pick .metrics div { min-width: 90px; }
  .morning-pick .pick-row > div { flex-wrap: wrap; }
}

.landing-page {
  --landing-ink: #17251f;
  --landing-green: #3f7e64;
  --landing-green-dark: #244f3f;
  --landing-mist: #edf3ef;
  --landing-cream: #f4f0e6;
  --landing-line: rgb(23 37 31 / 12%);
  min-height: 100vh;
  padding: 0;
  color: var(--landing-ink);
  background: #f5f7f5;
}

.landing-page a {
  color: inherit;
}

.landing-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.landing-header,
.landing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem clamp(1.5rem, 4vw, 4.25rem);
}

.landing-header {
  border-bottom: 1px solid var(--landing-line);
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
}

.landing-brand-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.03em;
}

.landing-brand-product {
  padding: .35rem .55rem;
  border-radius: 999px;
  color: var(--landing-green-dark);
  background: var(--landing-mist);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.landing-footer nav {
  display: flex;
  gap: 1.5rem;
  margin: 0;
}

.landing-header-login,
.landing-footer a {
  color: #53635c;
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
  transition: color 160ms ease;
}

.landing-header-login:hover,
.landing-header-login:focus-visible,
.landing-footer a:hover,
.landing-footer a:focus-visible {
  color: var(--landing-green-dark);
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, .62fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
  padding: clamp(2.5rem, 6vh, 6rem) max(clamp(1.5rem, 7vw, 8rem), calc((100vw - 96rem) / 2));
}

.landing-copy {
  max-width: 47rem;
}

.landing-eyebrow {
  margin: 0 0 1.1rem;
  color: var(--landing-green);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.landing-page h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3rem, 6.1vw, 6.5rem);
  font-weight: 680;
  letter-spacing: -.06em;
  line-height: .98;
  text-wrap: balance;
}

.landing-intro {
  margin: 1.65rem 0 0;
  color: #59675f;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.5;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
}

.landing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: .9rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.landing-button:hover,
.landing-button:focus-visible {
  transform: translateY(-2px);
}

.landing-page .landing-button-primary {
  gap: 1.5rem;
  color: #fff;
  background: var(--landing-green);
  box-shadow: 0 .9rem 2rem rgb(63 127 101 / 22%);
}

.landing-page .landing-button-primary:hover,
.landing-page .landing-button-primary:focus-visible {
  background: var(--landing-green-dark);
}

.landing-mark {
  position: relative;
  display: grid;
  min-height: clamp(20rem, 44vh, 34rem);
  place-items: center;
  overflow: hidden;
  border-radius: clamp(1.5rem, 3vw, 3rem);
  background: var(--landing-green-dark);
}

.landing-mark::before,
.landing-mark::after {
  position: absolute;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  content: "";
}

.landing-mark::before {
  top: -13rem;
  right: -9rem;
  background: rgb(255 255 255 / 5%);
}

.landing-mark::after {
  bottom: -16rem;
  left: -8rem;
  background: rgb(162 196 179 / 10%);
}

.landing-mark-fruit {
  position: relative;
  z-index: 1;
  width: clamp(9rem, 17vw, 15rem);
  aspect-ratio: 1;
  border-radius: 46% 54% 48% 52% / 44% 45% 55% 56%;
  background: var(--landing-green);
  box-shadow: inset -1.5rem -1rem 0 rgb(20 57 43 / 18%);
  transform: rotate(-8deg);
}

.landing-mark-leaf {
  position: absolute;
  top: -23%;
  right: 8%;
  width: 55%;
  height: 30%;
  border-radius: 100% 0 100% 0;
  background: #a8c6b4;
  transform: rotate(-12deg);
}

.landing-mark-highlight {
  position: absolute;
  top: 22%;
  left: 20%;
  width: 12%;
  height: 27%;
  border-radius: 999px;
  background: rgb(255 255 255 / 20%);
  transform: rotate(18deg);
}

.landing-footer {
  border-top: 1px solid var(--landing-line);
  color: #77817c;
  font-size: .78rem;
}

.landing-footer p {
  margin: 0;
  font-weight: 700;
}

@media (max-width: 820px) {
  .landing-shell {
    min-height: 100vh;
  }

  .landing-hero {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    padding-block: 4rem;
  }

  .landing-page h1 {
    max-width: 11ch;
  }

  .landing-mark {
    min-height: 22rem;
  }
}

@media (max-width: 560px) {
  .landing-header,
  .landing-footer {
    align-items: flex-start;
    padding: 1.25rem;
  }

  .landing-footer nav {
    gap: 1rem;
  }

  .landing-hero {
    padding: 3.25rem 1.25rem;
  }

  .landing-page h1 {
    font-size: clamp(2.8rem, 15vw, 4.4rem);
  }

  .landing-actions,
  .landing-button {
    width: 100%;
  }

  .landing-footer {
    flex-direction: column;
    gap: .8rem;
  }

  .landing-footer nav {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-button,
  .landing-header-login,
  .landing-footer a {
    transition: none;
  }
}

/* Employee morning overview */

.fh-morning{--ink:#244238;--green:#3f765f;--line:#dce6df;max-width:1140px;margin:0 auto;padding:36px 24px 64px;color:var(--ink);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.fh-morning *{box-sizing:border-box}.fh-morning h1{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.04em;line-height:1.15;margin:8px 0 12px}.fh-morning h2{font-size:1.15rem;line-height:1.35;margin:0 0 6px}.fh-morning p{margin:8px 0}.fh-morning .eyebrow{text-transform:uppercase;font-size:.75rem;font-weight:750;letter-spacing:.16em;color:var(--green)}
.fh-morning .top{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}.fh-morning .date-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.fh-morning label{display:block;font-size:.875rem;font-weight:650;margin-bottom:7px}.fh-morning input{font:inherit;padding:11px 12px;border:1px solid #b8cec1;border-radius:10px;min-height:48px;color:var(--ink);background:#fff;max-width:100%}
.fh-morning button,.fh-morning .action{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:11px 18px;font:inherit;font-weight:650;border:1px solid var(--green);border-radius:10px;background:var(--green);color:#fff;text-decoration:none;cursor:pointer}.fh-morning :focus-visible{outline:3px solid #9e5a13;outline-offset:4px}
.fh-morning .status{padding:20px 24px;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:14px;background:#edf4ee;margin-bottom:24px}.fh-morning .status-needs_review,.fh-morning .status-test_available{background:#fbf6e9;border-color:#e3d4ad;border-left-color:#a47422}.fh-morning .status-failed{background:#fff0ec;border-color:#e9c7bc;border-left-color:#a04e36}.fh-morning .status-not_prepared,.fh-morning .status-preparing{background:#f5f7f5}
.fh-morning .muted{font-size:.875rem;color:#5b6e62}.fh-morning .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 28px}.fh-morning .metric{border:1px solid var(--line);padding:16px 18px;border-radius:12px;background:#fff}.fh-morning dt{font-size:.8rem;color:#5b6e62}.fh-morning dd{margin:3px 0 0;font-size:1.75rem;font-weight:700}
.fh-morning .group{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;margin-bottom:18px}.fh-morning .group-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:#f5f8f3}.fh-morning .lines{list-style:none;padding:0 24px;margin:0}.fh-morning .line{padding:17px 0;border-bottom:1px solid var(--line)}.fh-morning .line:last-child{border:0}.fh-morning .line-main{display:flex;justify-content:space-between;gap:16px}.fh-morning .quantity{font-weight:650;white-space:pre-wrap;text-align:right}.fh-morning .note{white-space:pre-wrap;font-size:.925rem;margin-top:7px}.fh-morning .issues{margin:12px 0 0;padding-left:22px}.fh-morning .technical{margin-top:28px;border-top:1px solid var(--line);padding-top:16px}.fh-morning summary{cursor:pointer;font-size:.875rem;font-weight:600}.fh-morning .technical dd{font-size:.875rem;font-weight:400;overflow-wrap:anywhere}.fh-morning .technical dl{display:grid;gap:12px}.fh-morning .group,.fh-morning .status{overflow-wrap:anywhere}
@media(max-width:700px){.fh-morning{padding:24px 16px 40px}.fh-morning .top,.fh-morning .group-head{align-items:stretch;flex-direction:column}.fh-morning .date-form>div{flex:1;min-width:0}.fh-morning input{width:100%}.fh-morning .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.fh-morning .status,.fh-morning .group-head{padding:18px}.fh-morning .lines{padding:0 18px}.fh-morning .action{width:100%}.fh-morning .line-main>strong{min-width:0;overflow-wrap:anywhere}}

/* Reset inherited workspace badge styles only inside the employee overview. */
main:has(> .fh-morning) { width: min(76rem, 100%); padding: 0; }
.fh-morning .status { display: block; font-weight: 400; color: var(--ink); }
.fh-morning .status::before { display: none; }
.fh-morning button { margin-top: 0; }
.fh-morning + .fh-morning { padding-top: 0; }