/* Isolated home-dashboard component layouts. Loaded after site.css so the
   legacy stylesheet's duplicated dashboard declarations cannot override them. */
.dashboard-home-flow {
    display: grid;
    gap: clamp(.75rem, 2vw, 1rem);
    min-width: 0;
}

/* The home and read-only demo use the same sequence of real dashboard
   components.  Let the flow own their rhythm instead of stacking component-
   specific margins that vary by module and embedding context. */
.dashboard-home-flow > :is(.mobile-home-title, .dashboard-section, .dashboard-technical-section) {
    margin: 0;
    max-width: none;
    min-width: 0;
    width: 100%;
}

.dashboard-home-flow > .module-dashboard-section {
    margin-top: 0;
}

.dashboard-home-flow > .mobile-home-title {
    align-items: start;
    display: grid;
    gap: .12rem;
}

@media (max-width: 720px) {
    .dashboard-home-flow { gap: .8rem; }
}

.dashboard-stat-row {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr) minmax(0, 1.1fr) !important;
    padding: 0;
}

.dashboard-stat-row .dashboard-stat-cell {
    align-items: center;
    display: grid;
    gap: .28rem;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    min-width: 0;
    padding: .5rem .8rem;
    text-align: center;
}

.dashboard-stat-row .dashboard-stat-cell + .dashboard-stat-cell { border-left: 1px solid rgba(215, 209, 197, .9); }
.dashboard-stat-row .dashboard-stat-cell b { font-size: 1rem; line-height: 1; }
.dashboard-stat-row .dashboard-stat-cell small { color: var(--muted); font: inherit; line-height: 1.15; overflow-wrap: anywhere; }
.dashboard-stat-row:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dashboard-crop-snapshot {
    background: linear-gradient(140deg, #F6F0DF, #FFFDF8);
    border: 1px solid var(--border);
    border-radius: 7px;
    display: grid;
    gap: .45rem;
    margin: .6rem 0;
    padding: .65rem;
}

.dashboard-crop-summary {
    align-items: center;
    display: grid;
    gap: .6rem;
    grid-template-columns: minmax(6.75rem, 8.25rem) minmax(0, 1fr);
}

.dashboard-crop-art {
    align-items: center;
    display: flex;
    gap: .3rem;
    justify-content: flex-start;
    min-width: 0;
}

.dashboard-crop-art-item {
    align-items: center;
    background: #F6F0DF;
    border: 1px solid #E4D8BC;
    border-radius: 50%;
    display: grid;
    flex: 0 0 3rem;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.dashboard-crop-art-item .crop-visual { height: 2.8rem; margin: 0; width: 2.8rem; }
.dashboard-crop-content { display: grid; gap: .32rem; min-width: 0; }
.dashboard-crop-count { display: grid; gap: .05rem; line-height: 1; }
.dashboard-crop-count b { color: var(--ink); font-size: 1.45rem; }
.dashboard-crop-count span { color: var(--muted); font-size: .77rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.dashboard-crop-status { color: var(--muted); display: grid; gap: .1rem; line-height: 1.2; }
.dashboard-crop-status strong { color: var(--green); font-size: .82rem; font-weight: 800; }
.dashboard-crop-status.is-due strong { color: var(--orange); }
.dashboard-crop-status span { font-size: .78rem; }
.dashboard-crop-next { border-top: 1px solid var(--line-soft); color: var(--ink); font-size: .78rem; font-weight: 700; padding-top: .4rem; }

.dashboard-layout-header {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    justify-content: space-between;
    margin-bottom: .35rem;
    width: 100%;
}

.dashboard-layout-header h3 { flex: 1 1 auto; margin: 0; }
.dashboard-layout-header .layout-open-action { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.dashboard-layout-preview .layout-thumbnail-link {
    aspect-ratio: 900 / 420;
    height: auto;
    margin-bottom: .45rem;
}
.dashboard-layout-preview .farm-layout-thumb { transform: none; }
.dashboard-stat-row--crops { grid-template-columns: minmax(0, .75fr) minmax(0, 1.1fr) minmax(0, 1.45fr) !important; }
.dashboard-stat-row--crops .dashboard-stat-cell:last-child small { font-size: .66rem; white-space: nowrap; }

@media (max-width: 720px) {
    .dashboard-stat-row { display: grid !important; }
    .dashboard-stat-row .dashboard-stat-cell { gap: .22rem; min-height: 3.85rem; padding-inline: .72rem; }
    .dashboard-stat-row .dashboard-stat-cell b { font-size: .92rem; }
    .dashboard-stat-row .dashboard-stat-cell small { font-size: .66rem; }
    .dashboard-crop-summary { grid-template-columns: 6.75rem minmax(0, 1fr); }
    .dashboard-crop-art-item { flex-basis: 2.9rem; height: 2.9rem; width: 2.9rem; }
    .dashboard-crop-art-item .crop-visual { height: 2.68rem; width: 2.68rem; }
}

@media (max-width: 390px) {
    .dashboard-stat-row .dashboard-stat-cell { padding-inline: .66rem; }
    .dashboard-stat-row .dashboard-stat-cell small { font-size: .62rem; }
    .dashboard-crop-snapshot { gap: .35rem; padding: .58rem; }
    .dashboard-crop-summary { gap: .5rem; grid-template-columns: 6.3rem minmax(0, 1fr); }
    .dashboard-crop-art { gap: .2rem; }
    .dashboard-crop-art-item { flex-basis: 2.8rem; height: 2.8rem; width: 2.8rem; }
    .dashboard-crop-art-item .crop-visual { height: 2.58rem; width: 2.58rem; }
}
.demo-page { grid-template-columns:minmax(0,1fr); }
.demo-page > * { min-width:0; }
@media (max-width:720px) {
    .demo-page > :is(.dashboard-section,.mobile-home-title) { width:auto; }
}

.home-ordered-content > *, [data-home-card] { scroll-margin-top: 1rem; }
[data-order-list] { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; }
[data-order-list] li { align-items: center; border: 1px solid var(--line-soft); border-radius: 8px; display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) auto auto; min-height: 4rem; padding: .45rem .55rem .45rem .75rem; user-select: none; }
[data-order-list] button { min-height: 2.5rem; }
.home-block-label { display: grid; gap: .12rem; min-width: 0; text-align: left; }
.home-block-label strong { color: var(--ink); font-size: .92rem; line-height: 1.2; }
.home-block-label small { color: var(--muted); font-size: .75rem; line-height: 1.25; }
.home-block-visibility { background: transparent; border-color: var(--line-soft); color: var(--ink); font-size: .75rem; padding-inline: .6rem; }
.home-drag-handle { background: transparent; border-color: transparent; color: var(--muted); cursor: grab; font-size: 1.25rem; touch-action: none; width: 2.5rem; }
.home-move-control { display: none; }
[data-order-list] .is-hidden { background: color-mix(in srgb, var(--paper) 70%, var(--muted)); opacity: .65; }
[data-order-list] .is-dragging { outline: 2px solid #b94d00; background: #b94d0015; }
[data-order-list] .is-moving { background: color-mix(in srgb, var(--paper) 88%, var(--orange)); box-shadow: inset 0 0 0 1px var(--orange); }
[data-order-list] button:focus:not(:focus-visible) { outline: 0; }
[data-home-layout] [hidden] { display: none !important; }
.home-ordered-content { display: grid; gap: clamp(.75rem, 2vw, 1rem); margin-top: clamp(.75rem, 2vw, 1rem); }
.home-ordered-content > * { margin: 0 !important; }

/* Reordered homepage blocks leave .dashboard-home-flow at runtime.  Give that
   destination the same ownership of block width so cards and sections retain
   one mobile gutter after the preference script has arranged them. */
.home-ordered-content > :is(.dashboard-section, .dashboard-technical-section, .module-dashboard-grid) {
    box-sizing: border-box;
    max-width: none;
    min-width: 0;
    width: 100%;
}

/* One quiet disclosure-card pattern keeps farm settings readable and consistent. */
.settings-entry-grid, .preferences-form { box-sizing: border-box; margin-inline: auto; max-width: 48rem; width: min(calc(100% - 2rem), 48rem); }
.settings-entry-grid { margin: 0 auto .75rem !important; }
.settings-entry-card { box-sizing: border-box; width: 100%; }
.preferences-form { background: transparent; border: 0; box-shadow: none; display: grid; gap: .75rem; padding: 0; }
.preferences-form .preference-disclosure,
.settings-entry-card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: 8px; box-shadow: none; }
.preferences-form .preference-disclosure > summary { align-items: center; display: flex; gap: .75rem; padding: .9rem 1rem; }
.preferences-form .preference-disclosure > summary > span { min-width: 0; }
.preferences-form .preference-disclosure > summary b { color: var(--ink); font-size: 1rem; }
.preferences-form .preference-disclosure > summary small { font-size: .82rem; line-height: 1.35; }
.preferences-form .preference-disclosure > summary em { color: var(--muted); font-size: .78rem; }
.preferences-form .preference-disclosure > summary em { display: none; }
.preferences-form .preference-disclosure[open] > summary { border-bottom: 1px solid var(--line-soft); }
.preferences-form .preference-disclosure[open] > summary em { color: var(--muted); }
.preferences-form .preference-disclosure__body { border: 0; padding: 1rem; }
.preferences-form .module-setting-card,
.preferences-form .email-schedule-card,
.preferences-form .preference-row,
.preferences-form .email-mode-note { border: 1px solid var(--line-soft); border-left-width: 1px; border-radius: 8px; box-shadow: none; }
.preferences-form .module-setting-card.is-enabled,
.preferences-form .email-preference-row.urgent-row,
.preferences-form .email-mode-note.enabled { border-left-width: 1px; }
.preferences-form .module-setting-card { padding: .65rem .75rem; }
.preferences-form .module-setting-open { background: transparent; border-color: var(--line-soft); color: var(--ink); }
.preferences-form .preference-toggle-grid .checkbox-field,
.preferences-form .email-schedule-card .checkbox-field,
.preferences-form .urgent-toggle { background: transparent; border-color: var(--line-soft); border-radius: 6px; }
.preferences-form .settings-note { color: var(--muted); font-size: .85rem; line-height: 1.45; margin: 0; }
.preferences-form .homepage-layout-intro { color: var(--muted); font-size: .9rem; margin: 0; }
@media (max-width: 520px) {
  .settings-entry-grid, .preferences-form { width: min(calc(100% - 1.5rem), 48rem); }
  .settings-entry-grid { margin-inline: auto !important; }
  .preferences-form .preference-disclosure > summary { padding: .8rem; }
  .preferences-form .preference-disclosure__body { padding: .8rem; }
  [data-order-list] li { gap: .35rem; grid-template-columns: minmax(0, 1fr) auto auto auto; padding-inline: .6rem; }
  .home-drag-handle { display: none; }
  .home-move-control { background: transparent; border-color: var(--line-soft); display: block; font-size: 1rem; min-width: 2.35rem; padding: 0; width: 2.35rem; }
}