/* Page features: the Analyze tool, the photo comparison, results, home sections, history, settings and help. */

/* ---------- hero ---------- */
.hero { padding-block: var(--s-8) var(--s-10); }
.hero__grid { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 6fr); gap: var(--s-9); align-items: center; }
.hero__main { display: grid; gap: var(--s-4); align-content: start; }
.hero h1 { font-size: clamp(2.25rem, 1.6rem + 1.9vw, 3.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; max-width: 16ch; }
.lede { font-size: var(--t-md); color: var(--ink-soft); max-width: 42ch; }

.tool { display: grid; gap: var(--s-4); padding: var(--s-5); margin-top: var(--s-4); border-radius: var(--radius-lg); box-shadow: var(--e2); }
.dropzone {
  display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: var(--s-7) var(--s-4);
  border: 1.5px dashed var(--rule-strong); border-radius: var(--radius); background: var(--paper);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out);
}
.dropzone svg { width: 28px; height: 28px; color: var(--ink-soft); margin-bottom: var(--s-2); }
.dropzone__main { font-weight: 600; font-size: var(--t-md); }
.dropzone__main u { text-decoration-color: var(--survey); text-underline-offset: 0.2em; }
.dropzone__sub { font-size: var(--t-sm); color: var(--ink-soft); }
.dropzone:hover, .dropzone.is-over { border-color: var(--survey); background: var(--survey-tint); }
.dropzone:hover svg, .dropzone.is-over svg { color: var(--survey); }
.dropzone:focus-within { box-shadow: var(--focus); }
.tool__count { font-size: var(--t-sm); color: var(--ink-soft); }
.tool__count:empty { display: none; }
.queue { list-style: none; padding: 0; display: grid; gap: var(--s-2); max-height: 216px; overflow: auto; }
.queue:empty { display: none; }
.queue__item { display: grid; grid-template-columns: 40px auto 1fr; gap: var(--s-3); align-items: center; font-size: var(--t-sm); }
.queue__item img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius); }
.queue__code { font-weight: 650; }
.queue__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.tool__actions { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); }
.btn--lg { min-height: 48px; font-size: var(--t-base); padding: 0 var(--s-6); }
.samples { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.samples__label { font-size: var(--t-sm); color: var(--ink-soft); }
.samples__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sample { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 12px 4px 4px; font-size: var(--t-sm); font-weight: 550; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-raised); transition: border-color var(--fast) var(--ease-out), background-color var(--fast) var(--ease-out); }
.sample img { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; }
.sample:hover { border-color: var(--ink-soft); background: var(--paper); }
.status { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--survey-tint); color: var(--survey-deep); font-size: var(--t-sm); font-weight: 550; }

/* photo and colour map, split by a draggable divider */
.compare { display: grid; gap: var(--s-3); }
.compare__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); background: var(--paper-sunk); box-shadow: var(--e3); }
.compare__frame img, .compare__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__frame canvas { clip-path: inset(0 0 0 var(--split)); opacity: 0; transition: opacity var(--base) var(--ease-out); }
.compare.is-ready canvas { opacity: 1; }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: var(--paper-raised); box-shadow: 0 0 0 1px rgb(28 36 32 / 0.18); pointer-events: none; opacity: 0; }
.compare.is-ready .compare__handle { opacity: 1; }
.compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--paper-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2420' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18-6-6 6-6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: var(--e2); }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare__frame:has(.compare__range:focus-visible) { box-shadow: var(--focus), var(--e3); }
.compare__caption { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-soft); }
.compare__caption b { color: var(--ink); font-weight: 600; }
.compare__legend { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-xs); }
.compare__legend i { width: 72px; height: 6px; border-radius: 3px; background: var(--ramp); }
.compare.is-unmeasured .compare__caption, .compare.is-unmeasured .compare__range { display: none; }

/* ---------- results ---------- */
.results { padding-block: var(--s-8) var(--s-10); background: var(--paper-raised); border-top: 1px solid var(--rule); scroll-margin-top: 64px; }
.results .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.results__head { display: grid; gap: var(--s-1); }
.results__head h2 { font-size: var(--t-xl); }
.results__summary { color: var(--ink-soft); }

.plan__grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-4); }
.plan__grid:empty { display: none; }
.plot { min-width: 0; }
.plot__hit { display: grid; width: 100%; text-align: left; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out); }
.plot__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-sunk); border-bottom: 4px solid var(--fill, var(--rule)); }
.plot__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--base) var(--ease-out); }
.plot__body { display: grid; gap: 2px; padding: var(--s-3) var(--s-4) var(--s-4); }
.plot__code { font-size: var(--t-sm); color: var(--ink-soft); font-weight: 550; }
.plot__code em { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--good-bg); color: var(--good); font-size: var(--t-xs); font-weight: 650; }
.plot__yield { font-size: var(--t-sm); color: var(--ink-soft); }
.plot__yield b { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; color: var(--ink); margin-right: 2px; }
.plot__class { font-size: var(--t-sm); font-weight: 600; }
.plot--good .plot__class { color: var(--good); }
.plot--fair .plot__class { color: var(--fair); }
.plot--poor .plot__class { color: var(--poor); }
.plot__status { font-size: var(--t-sm); color: var(--ink-soft); }
.plot.is-pending img { filter: grayscale(0.8); }
.plot.is-failed img { filter: grayscale(1) opacity(0.5); }
.plot.is-failed .plot__status { color: var(--survey-deep); }
.plot__scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(100% - 2px), var(--survey) calc(100% - 2px)); transform: translateX(-100%); animation: plot-scan 1.4s var(--ease-in-out) infinite alternate; }
@keyframes plot-scan { to { transform: translateX(0); } }
@media (hover: hover) and (pointer: fine) {
  button.plot__hit:hover { border-color: var(--ink-soft); }
  button.plot__hit:hover img { transform: scale(1.03); }
}
.plot.is-selected .plot__hit { border-color: var(--survey); box-shadow: 0 0 0 1px var(--survey); }
.plot__hit:focus-visible { box-shadow: var(--focus); }

.sheet-slot:empty { display: none; }
.sheet-slot[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* ---------- home sections ---------- */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: start; }
.two-up > div { display: grid; gap: var(--s-4); align-content: start; }
.tips { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); margin-top: var(--s-2); }
.tips li { display: grid; gap: var(--s-2); align-content: start; color: var(--ink-soft); }
.tips svg { width: 22px; height: 22px; color: var(--good); }
.croplist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.croplist li { padding: 6px 14px; border-radius: 999px; background: var(--good-bg); color: var(--good); font-weight: 600; font-size: var(--t-sm); }
.faq-wrap { display: grid; gap: var(--s-5); max-width: 820px; }

/* ---------- register ---------- */
.table-wrap { overflow-x: auto; }
.register { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.register th, .register td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.register thead th { font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); background: var(--paper); border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.register thead th button { font-weight: inherit; letter-spacing: inherit; text-transform: inherit; display: inline-flex; gap: 6px; align-items: center; }
.register thead th button::after { content: ""; width: 8px; height: 8px; background: var(--rule-strong); clip-path: polygon(50% 0, 100% 40%, 0 40%, 0 60%, 100% 60%, 50% 100%); }
.register thead th[aria-sort="ascending"] button::after { background: var(--survey); clip-path: polygon(50% 15%, 100% 85%, 0 85%); }
.register thead th[aria-sort="descending"] button::after { background: var(--survey); clip-path: polygon(0 15%, 100% 15%, 50% 85%); }
.register tbody tr:hover { background: var(--paper); }
.register .num { font-weight: 650; white-space: nowrap; }
.register .unit { color: var(--ink-soft); font-weight: 500; font-size: var(--t-xs); }
.register__toggle { font-weight: 650; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.25em; }
.register__toggle:hover, .register__row.is-open .register__toggle { text-decoration-color: var(--survey); color: var(--survey-deep); }
.register__file { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register__place, .register__time { color: var(--ink-soft); white-space: nowrap; }
.register__detail > td { padding: var(--s-4); background: var(--paper); }
.empty { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-9) var(--s-4); color: var(--ink-soft); }

/* ---------- settings ---------- */
.settings { max-width: 920px; }
.profile { display: grid; grid-template-columns: auto 1fr; gap: var(--s-6); padding: var(--s-6); }
.profile__avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: var(--t-xl); font-weight: 800; }
.profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.field input[name="roleCustom"] { margin-top: var(--s-2); }
.profile__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--s-2); }
.combo { position: relative; }
.combo__list {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 4px;
  list-style: none; padding: 4px 0; max-height: 320px; overflow: auto;
  background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--e3);
}
.combo__list [role="option"] { padding: 8px var(--s-3); cursor: pointer; font-size: var(--t-sm); }
.combo__list [role="option"]:hover, .combo__list [aria-selected="true"] { background: var(--survey-tint); }
.combo__none { padding: 8px var(--s-3); color: var(--ink-soft); font-size: var(--t-sm); }
.rows { padding: 0 var(--s-6); }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-5) 0; }
.row + .row { border-top: 1px solid var(--rule); }
.row__title { font-weight: 600; }
.row__sub { font-size: var(--t-sm); color: var(--ink-soft); }

/* ---------- help ---------- */
.help { max-width: 920px; }
.steps { padding: var(--s-5) var(--s-6) var(--s-6); list-style: none; counter-reset: step; display: grid; gap: var(--s-4); }
.steps li { counter-increment: step; position: relative; padding-left: 48px; max-width: calc(var(--measure) + 48px); color: var(--ink-soft); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--good-bg); color: var(--good); font-weight: 700; font-size: var(--t-sm); }
.steps b { color: var(--ink); }
.faq { display: grid; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:first-child { border-top: 0; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-6); font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat; color: var(--ink-soft); transition: transform var(--base) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--survey); }
.faq summary:hover { background: var(--paper); }
.faq details p { padding: 0 var(--s-6) var(--s-5); color: var(--ink-soft); max-width: var(--measure); }
.about { display: grid; grid-template-columns: 1fr 1fr; }
.about div { padding: var(--s-5) var(--s-6); border-top: 1px solid var(--rule); }
.about div:nth-child(-n+2) { border-top: 0; }
.about div:nth-child(even) { border-left: 1px solid var(--rule); }
.about dt { font-weight: 650; margin-bottom: 4px; }
.about dd { color: var(--ink-soft); font-size: var(--t-sm); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero__grid { gap: var(--s-7); }
}
@media (max-width: 980px) {
  .hero { padding-block: var(--s-7) var(--s-8); }
  .hero__grid { grid-template-columns: 1fr; }
  .two-up { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 2.1rem; }
  .tool { padding: var(--s-4); }
  .tool__actions { grid-template-columns: 1fr; }
  .plan__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips { grid-template-columns: 1fr; }
  .profile { grid-template-columns: 1fr; padding: var(--s-4); }
  .fields { grid-template-columns: 1fr; }
  .rows { padding: 0 var(--s-4); }
  .row { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  select[data-pref] { min-width: 0; width: 100%; }
  .about { grid-template-columns: 1fr; }
  .about div:nth-child(even) { border-left: 0; }
  .about div:nth-child(2) { border-top: 1px solid var(--rule); }
  .panel__head, .faq summary, .faq details p, .steps { padding-inline: var(--s-4); }
  .croplist { grid-template-columns: 1fr; }
}