/* Shared land camera/weather controls. Homepage and city use identical widget markup. */
  .hl-land-camera {
    position: absolute; right: 12px; bottom: 12px;
    display: flex; align-items: center; gap: 6px;
    padding: 6px; border-radius: 10px;
    background: rgba(255,255,255,0.82); border: 1px solid var(--line);
    backdrop-filter: blur(4px);
  }
  .hl-land-camera button {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
    background: rgba(30,40,32,0.05); color: var(--txt); cursor: pointer;
    font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  }
  .hl-land-camera button:hover { background: var(--panel2); }
  .camera-center-icon{position:relative;display:block;width:16px;height:16px;border:2px solid currentColor;border-radius:50%;box-sizing:border-box}
  .camera-center-icon i{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%)}
  .hl-land-camera .hl-land-camera-percent {
    min-width: 44px; text-align: center; font-size: 11px; color: var(--dim);
    font-variant-numeric: tabular-nums;
  }
  /* ===== WEATHER & TIME-OF-DAY PICKER ===== */
  .hl-land-weather-anchor {
    position: absolute; top: 12px; right: 12px; z-index: 8;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  }
  .hl-land-weather-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.92); color: var(--txt);
    border: 1px solid var(--line); backdrop-filter: blur(4px);
    font-size: 12px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: border-color .12s, transform .08s;
  }
  .hl-land-weather-trigger:hover { border-color: var(--green); }
  .hl-land-weather-trigger:active { transform: scale(0.97); }
  .hl-land-weather-trigger-icon { font-size: 16px; line-height: 1; }
  .hl-land-weather-trigger-text { font-weight: 500; line-height: 1; }
  .hl-land-weather-trigger-pin {
    color: var(--gold); font-size: 11px; margin-left: 2px; line-height: 1;
    transform: translateY(-1px);
  }
  .hl-land-weather-trigger .chev {
    font-size: 9px; line-height: 1; margin-left: 2px; color: var(--dim);
    transition: transform .16s ease;
  }
  .hl-land-weather-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .hl-land-weather {
    position: relative;
    width: 252px; padding: 12px; border-radius: 12px;
    background: #ffffff; border: 1px solid var(--line);
    box-shadow: 0 6px 22px rgba(0,0,0,0.12);
    display: flex; flex-direction: column; gap: 12px;
  }
  .hl-land-weather[hidden] { display: none; }
  .wx-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 10px; letter-spacing: 1px; color: var(--dim);
    text-transform: uppercase; font-weight: 600;
  }
  .wx-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
    background: var(--panel2); border: 1px solid var(--line);
    color: var(--dim); font-size: 12px; line-height: 1; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, transform .08s;
  }
  .wx-close:hover { background: var(--panel); border-color: var(--green); color: var(--txt); }
  .wx-close:active { transform: scale(0.9); }
  .wx-section { display: flex; flex-direction: column; gap: 6px; }
  .wx-sec-label {
    font-size: 9.5px; letter-spacing: .5px; color: var(--dim);
    text-transform: uppercase;
  }
  .wx-grid, .wx-time {
    display: grid; gap: 4px;
    grid-template-columns: repeat(4, 1fr);
  }
  .wx-time { grid-template-columns: repeat(3, 1fr); }
  .wx-cell {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border-radius: 8px; cursor: pointer;
    background: var(--panel2); border: 1px solid var(--line);
    color: var(--txt); font-size: 11px; line-height: 1.1;
    transition: background .12s, border-color .12s, transform .08s;
  }
  .wx-cell:hover { background: var(--panel); border-color: var(--green); }
  .wx-cell:active { transform: scale(0.96); }
  .wx-cell .ic { font-size: 18px; line-height: 1; }
  .wx-cell.active {
    background: linear-gradient(180deg, rgba(63,191,111,0.16), var(--panel));
    border-color: var(--green); color: var(--green); font-weight: 600;
  }
  .wx-cell span {
    font-size: 9.5px; letter-spacing: .2px; line-height: 1.05;
    max-width: 56px; text-align: center;
  }
  .wx-reset {
    align-self: stretch; padding: 7px 10px; border-radius: 8px;
    background: transparent; border: 1px dashed var(--line);
    color: var(--dim); font-size: 11px; cursor: pointer;
    transition: color .12s, border-color .12s;
  }
  .wx-reset:hover { color: var(--green); border-color: var(--green); }
  .wx-reset:active { transform: scale(0.98); }
  /* Keep the shared picker above the clipped map, with touch-sized controls. */
  .hl-land-weather-trigger{box-sizing:border-box;min-height:38px;height:38px;max-width:180px;padding:6px 10px;gap:5px;border-radius:10px;box-shadow:none;white-space:nowrap}
  .hl-land-weather-trigger-text{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.25}
  .hl-land-weather{box-sizing:border-box;position:fixed;inset:auto;margin:0;width:min(288px,calc(100vw - 16px));max-height:calc(100dvh - 16px);padding:10px;gap:10px;z-index:1000;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid var(--line);border-radius:12px;background:var(--hl-paper,#fffef8);color:var(--txt);font-family:var(--hl-font,system-ui,sans-serif)}
  .hl-land-weather[hidden]{display:none!important}
  .hl-land-weather::backdrop{background:transparent;pointer-events:none}
  .hl-land-weather .wx-head,.hl-land-weather .wx-section,.hl-land-weather .wx-reset{flex-shrink:0}
  .hl-land-weather .wx-head{font-size:11px;letter-spacing:.3px;min-height:36px}
  .hl-land-weather .wx-grid,.hl-land-weather .wx-time{gap:5px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .hl-land-weather .wx-time{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hl-land-weather .wx-cell{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:48px;height:48px;max-height:none;padding:5px 2px;gap:3px;border:1px solid var(--line);border-radius:9px;box-shadow:none;font-size:11px;line-height:1.2;transform:none}
  .hl-land-weather .wx-cell .ic{font-size:17px;line-height:18px;max-width:100%}
  .hl-land-weather .wx-cell span:not(.ic){font-size:11px;line-height:14px;letter-spacing:0;max-width:100%;white-space:nowrap}
  .hl-land-weather .wx-cell.active{border-color:var(--green);background:var(--hl-active,#e6f4bb);color:var(--hl-brand,#294632)}
  .hl-land-weather .wx-sec-label{font-size:10px;line-height:1.3;letter-spacing:0}
  .hl-land-weather .wx-close{box-sizing:border-box;flex:0 0 36px;width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;padding:0;border-radius:8px;box-shadow:none}
  .hl-land-weather .wx-reset{box-sizing:border-box;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:11px;line-height:1.4;white-space:normal}
  .hl-land-weather-trigger:focus-visible,.hl-land-weather :is(button,input):focus-visible{outline:0!important;outline-offset:0!important;border-color:#42764c;box-shadow:none!important}
  @media(max-width:600px){.hl-land-weather-anchor{top:8px;right:8px}.hl-land-weather-trigger{min-height:38px;height:38px;max-width:160px}}

.hl-land-weather-trigger{font-family:inherit;color:var(--txt,#254c38);background:rgba(255,255,255,.92);border-color:var(--line,#ccd6bf)}
.hl-land-weather,.hl-land-camera{--line:var(--hl-line,#ccd6bf);--txt:var(--hl-ink,#254c38);--dim:var(--hl-muted,#728168);--green:var(--hl-brand,#42764c);--panel2:var(--hl-paper,#f4f6ed)}
.hl-land-weather .wx-cell{box-shadow:none!important}.hl-land-weather-trigger:focus-visible,.hl-land-camera button:focus-visible{outline:2px solid #42764c;outline-offset:2px}