/* =========================================================================
   AGRIFLOOD — PHASE D: UNIVERSAL FILTERS + COMPARE SYSTEM
   =========================================================================
   Purely additive. Every selector below is new (pd-* namespace) except the
   two narrow, explicitly-scoped tweaks to the existing .analytics-geo-filter
   layout noted inline. Nothing here changes Dashboard/Sidebar/Nav/Header/
   Footer/AutoML/Hazard Maps/etc. layout — those are untouched.
   Load order: main.css -> universal-foundation.css -> system-wide-
   application.css -> final-polish.css -> this file (loads last, so it can
   safely restyle the existing filter bar into the new responsive layout).
   ========================================================================= */

.pd-filterbar {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, var(--shadow));
}

.pd-filterbar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pd-filterbar-title { font-size: 14px; font-weight: 700; color: var(--text); }
.pd-filterbar-hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.pd-filterbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-filterbar-body[hidden], [data-pd-collapsible][hidden] { display: none !important; }
.pd-filterbar.pd-collapsed { padding-bottom: 12px; }
.pd-filterbar.pd-collapsed .pd-filterbar-head { margin-bottom: 0; }
.pd-btn-collapse { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }

.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray-600, var(--muted));
  font: 600 12px 'DM Sans', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
  white-space: nowrap;
}
.pd-btn:hover { background: var(--gray-100); color: var(--text); }
.pd-btn:active { transform: translateY(1px); }
.pd-btn:focus-visible { outline: none; box-shadow: var(--uf-focus-ring, 0 0 0 3px rgba(22,163,74,.28)); }
.pd-btn-primary { background: var(--green-mid); border-color: var(--green-mid); color: #fff; }
.pd-btn-primary:hover { background: var(--green); border-color: var(--green); color: #fff; }
.pd-btn[aria-expanded="true"] { background: var(--green-light); border-color: #bbf7d0; color: #166534; }

/* --- Filter fields: responsive row / 2-row / stack ---------------------- */
.pd-filterbar-fields { display: flex; flex-direction: column; gap: 10px; }
.pd-filterbar .analytics-geo-heading > span { display: none; }

/* Desktop: the existing geo-filter grid stays as-is (single row); the
   extra Phase D fields flow in the same single row alongside it. */
.pd-extra-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}
.pd-field { display: flex; flex-direction: column; gap: 6px; }
.pd-field > span { font-size: 11px; font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: .04em; }
.pd-field select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  font: 500 13px 'DM Sans', sans-serif;
}
.pd-field select:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: var(--uf-focus-ring, 0 0 0 3px rgba(22,163,74,.2));
}

/* Tablet: fold the two field groups into two rows. */
@media (max-width: 1080px) {
  .pd-extra-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobile: stack every control vertically, full width. */
@media (max-width: 640px) {
  .pd-filterbar-head { flex-direction: column; }
  .pd-filterbar-actions { width: 100%; }
  .pd-filterbar-actions .pd-btn { flex: 1 1 auto; }
  .pd-extra-fields { grid-template-columns: 1fr; }
  /* Progressive, additive override of the existing geo-filter grid so it
     stacks too on small screens — scoped to inside .pd-filterbar only. */
  .pd-filterbar .analytics-geo-filter { grid-template-columns: 1fr !important; }
}

/* --- Active filter chips -------------------------------------------------- */
.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: var(--green-pale, #f0fdf4);
  border: 1px solid #bbf7d0;
  color: #14532d;
  font-size: 11.5px;
}
.pd-chip strong { font-weight: 700; }
.pd-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(22,101,52,.12);
  color: #14532d;
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
}
.pd-chip-x:hover { background: rgba(22,101,52,.22); }

/* --- Compare panel --------------------------------------------------------- */
.pd-compare { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.pd-compare[hidden] { display: none; }
.pd-compare-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.pd-compare-values { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-compare-values label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: .04em; }
.pd-compare-values select { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: 500 13px 'DM Sans', sans-serif; min-width: 150px; }
.pd-compare-summary { margin-top: 14px; }
.pd-compare-loading, .pd-compare-error { font-size: 12.5px; color: var(--muted); padding: 8px 0; }
.pd-compare-error { color: #991b1b; }
.pd-compare-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pd-compare-table th, .pd-compare-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.pd-compare-table th { background: var(--gray-50); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-600); }
.pd-compare-table td:not(:first-child), .pd-compare-table th:not(:first-child) { text-align: right; font-family: 'DM Mono', monospace; }

/* --- Chart toolbar (auto-injected onto every .chart-wrap card) ------------ */
.card-header { position: relative; }
.pd-chart-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.pd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--gray-600, var(--muted));
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pd-icon-btn svg { width: 16px; height: 16px; }
.pd-toolbar-action{width:auto;min-width:30px;padding:0 6px;gap:4px}
.pd-toolbar-action span{display:none;font:700 10px/1 'DM Sans',sans-serif;white-space:nowrap}
.pd-reset-filter-btn{width:auto;min-width:30px;padding:0 8px;gap:5px;border-color:#dbe7ef;background:#f8fafc;color:#166534;font:700 10px/1 'DM Sans',sans-serif;white-space:nowrap}
.pd-reset-filter-btn span{display:inline}
.pd-icon-btn:hover { background: var(--gray-100); color: var(--text); }
.pd-icon-btn:focus-visible { outline: none; box-shadow: var(--uf-focus-ring, 0 0 0 3px rgba(22,163,74,.28)); }
.pd-compare-badge{display:inline-flex;align-items:center;max-width:240px;margin:0 4px;padding:4px 8px;border:1px solid #bfdbfe;border-radius:999px;background:#eff6ff;color:#1e40af;font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-compare-context{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 0 10px;padding:9px 11px;border:1px solid #bfdbfe;border-radius:9px;background:#f8fbff;color:#334155;font-size:11px}.pd-compare-context[hidden]{display:none}.pd-compare-context strong{color:#0f172a}.pd-compare-dimension{padding:3px 7px;border-radius:999px;background:#dbeafe;color:#1e40af;font-weight:800;text-transform:uppercase;letter-spacing:.03em}.pd-compare-value{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:#0f172a}.pd-compare-value i{width:11px;height:11px;border:2px solid rgba(15,23,42,.18);border-radius:3px}.pd-compare-versus{color:#64748b;font-size:10px;font-weight:700;text-transform:uppercase}.pd-compare-key{flex-basis:100%;padding-top:2px;color:#475569;font-size:10px;font-weight:700}
.pd-has-chart-toolbar>.card-header{flex-wrap:wrap;gap:10px 12px}.pd-has-chart-toolbar>.card-header>:first-child{flex:1 1 280px;min-width:min(100%,280px)}.pd-has-chart-toolbar .pd-chart-toolbar{max-width:100%;flex-wrap:wrap}.pd-comparing>.card-header>:first-child{flex-basis:100%;width:100%}.pd-comparing>.card-header .pd-chart-toolbar{width:100%;margin-left:0;justify-content:flex-start}.pd-comparing .pd-compare-badge{max-width:min(100%,360px)}
@media(max-width:640px){.pd-compare-badge{display:none}.pd-compare-context{align-items:flex-start}.pd-compare-context strong{flex-basis:100%}}

/* --- Contextual graph filter panel -------------------------------------- */
.card,.live-chart-panel{position:relative}
/* A graph filter is a popup over its own graph.  Its width is capped by the
   owning card, so it cannot spill into the dashboard card beside it. */
.pdg-panel{position:absolute;z-index:45;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:calc(100% - 28px);max-width:520px;max-height:calc(100% - 28px);overflow:auto;margin:0;padding:16px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 45px rgba(15,23,42,.22)}
.pdg-panel[hidden],.pdg-compare[hidden]{display:none}
.pdg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.pdg-head strong{display:block;font-size:13px;color:var(--text)}.pdg-head small{display:block;margin-top:2px;color:var(--muted);font-size:11px}.pdg-close{border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.pdg-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pdg-fields .pd-field select{height:38px}.pdg-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}.pdg-actions .pd-btn{height:34px;padding:0 11px}.pdg-status{margin-top:10px}.pdg-status:empty,.pdg-status:has(>div:empty){display:none}.pdg-status>div{display:flex;flex-wrap:wrap;gap:5px}.pdg-status>div:empty{display:none}.pdg-chip{padding:4px 7px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:999px;color:#166534;font-size:10.5px}.pdg-compare{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}.pdg-compare-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:end}.pdg-compare-controls label{display:flex;flex-direction:column;gap:5px;color:var(--gray-600);font-size:10.5px;font-weight:700;text-transform:uppercase}.pdg-compare-controls select{height:36px;min-width:0;border:1px solid var(--border);border-radius:7px;padding:0 8px;background:#fff}
.pdg-compare-note{margin-top:8px;color:var(--muted);font-size:10.5px}
@media(max-width:760px){.pdg-panel{position:fixed;z-index:1300;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:calc(100vw - 20px);max-width:520px;max-height:calc(100dvh - 20px);overflow:auto}.pdg-fields{grid-template-columns:1fr}.pdg-compare-controls{grid-template-columns:1fr}.pdg-status{align-items:flex-start;flex-direction:column}}

/* Dashboard filter cards: balanced heights, restrained nesting, clean grid. */
.dashboard-filter-area{border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);padding:0;overflow:hidden}
.dashboard-filter-area-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px!important;border-bottom:1px solid var(--border)}
.dashboard-filter-area.pd-collapsed .dashboard-filter-area-heading{border-bottom:0}
.dashboard-filter-area .dashboard-filter-grid{padding:12px!important;gap:12px!important;align-items:stretch}
.dashboard-filter-area .dashboard-filter-group{display:flex;min-height:100%;flex-direction:column}
.dashboard-filter-area .dashboard-filter-card-heading{min-height:58px;padding:11px 12px}
.dashboard-filter-area .dashboard-filter-content{display:flex;flex:1;padding:10px}
.dashboard-filter-area .pd-filterbar{display:flex;flex:1;flex-direction:column;margin:0;padding:0;border:0;box-shadow:none}
.dashboard-filter-area .pd-filterbar-head{gap:8px;margin-bottom:9px}.dashboard-filter-area .pd-filterbar-heading{display:none}.dashboard-filter-area .pd-filterbar-actions{width:100%;gap:6px}.dashboard-filter-area .pd-filterbar-actions .pd-btn{flex:1 1 auto;height:31px;padding:0 8px;font-size:9.5px}.dashboard-filter-area .pd-filterbar-body{display:flex;flex:1;flex-direction:column}.dashboard-filter-area .pd-chips{margin-top:8px}
.pd-filter-fallback{margin:0 0 16px;padding:10px 13px;border:1px solid #fde68a;border-radius:9px;background:#fffbeb;color:#854d0e;font-size:12px;line-height:1.45}
@media(max-width:640px){.dashboard-filter-area-heading{align-items:flex-start;flex-direction:column}.dashboard-filter-area-heading .pd-btn{width:100%}}
@media(max-width:900px){.pd-chart-toolbar{width:100%;max-width:100%;margin-left:0;gap:5px;flex-wrap:wrap}.pd-icon-btn{display:inline-flex;width:auto;min-width:40px;height:40px;flex:0 0 auto;padding:0 9px;border-color:#dbe7ef;background:#fff;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.pd-toolbar-action span,.pd-reset-filter-btn span{display:inline}.pd-reset-filter-btn{width:auto;min-width:40px;flex:0 0 auto;padding:0 9px}.chart-wrap canvas[data-drilldown-ready]{touch-action:manipulation}.chart-drilldown-hint{position:relative;z-index:2;min-height:42px;align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}}
@media(max-width:900px){.chart-drilldown{z-index:1205;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.chart-drilldown-dialog{width:100%;max-height:calc(100dvh - 16px);overscroll-behavior:contain}}

/* --- Loading skeleton (shown over .content during async navigation) ------ */
.pd-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(248,250,252,.72);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  z-index: 40;
}
.pd-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--gray-200);
  border-top-color: var(--green-mid);
  animation: pd-spin .7s linear infinite;
}
@keyframes pd-spin { to { transform: rotate(360deg); } }
.content { position: relative; min-height: 240px; }
.content.pd-route-enter{animation:pd-route-in .22s ease-out}
@keyframes pd-route-in{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.content.pd-navigating > *:not(.pd-loading-overlay) { opacity: .5; pointer-events: none; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .pd-spinner { animation-duration: 1.4s; }
  .content.pd-navigating > *:not(.pd-loading-overlay) { transition: none; }
  .content.pd-route-enter{animation:none}
}

/* --- Drilldown modal enhancements (sort / columns / export excel) -------- */
.chart-drilldown-tools { position:relative; flex-wrap: wrap; gap: 8px; }
.pd-modal-btn {
  height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--gray-600);
  font: 600 11.5px 'DM Sans', sans-serif;
  cursor: pointer;
}
.pd-modal-btn:hover { background: var(--gray-100); color: var(--text); }
.pd-col-toggle { position:relative; display:flex; flex-direction:column; align-items:flex-end; }
.pd-col-toggle.pd-open{flex:1 0 100%;align-items:stretch;order:20}
.pd-col-toggle.pd-open>.pd-modal-btn{display:none}
.pd-col-menu {
  position: static;
  width:100%;
  max-height: 360px;
  margin-top:8px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.04);
  padding: 12px;
}
.pd-col-menu[hidden] { display: none; }
.pd-col-menu-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;padding:0 2px 10px;border-bottom:1px solid var(--border)}
.pd-col-menu-head strong,.pd-col-menu-head small{display:block}.pd-col-menu-head strong{font-size:13px;color:var(--text)}.pd-col-menu-head small{margin-top:3px;font-size:10.5px;color:var(--muted)}
.pd-col-menu-actions{display:flex;align-items:center;gap:6px}
.pd-col-menu-head button{height:30px!important;padding:0 10px!important;font-size:10.5px!important}
.pd-col-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.pd-col-grid label {
  display: flex;
  align-items: center;
  flex:none!important;
  gap: 9px;
  min-height:42px;
  margin:0!important;
  padding: 8px 10px;
  border:1px solid #e2e8f0;
  border-radius: 8px;
  background:#fff;
  font-size: 12px!important;
  line-height:1.3;
  color: var(--text);
  cursor: pointer;
  min-width:0;
}
.pd-col-grid label:has(input:checked){border-color:#86efac;background:#f0fdf4;color:#14532d}
.pd-col-grid label input{flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:#16a34a}
.pd-col-grid label span{display:block;min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:left;font-weight:600}
.pd-col-grid label:hover { border-color:#bbf7d0;background:#f7fef9; }
@media(max-width:700px){.pd-col-toggle,.pd-col-toggle>.pd-modal-btn{width:100%}.pd-col-menu-head{align-items:flex-start;flex-direction:column}.pd-col-menu-actions{width:100%}.pd-col-menu-actions button{flex:1}.pd-col-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.pd-col-grid{grid-template-columns:1fr}}
#chartDrilldownHead th { cursor: pointer; user-select: none; }
#chartDrilldownHead th:hover { color: var(--green-mid); }
#chartDrilldownHead th::after { content: ' ⇅'; opacity: .35; font-size: 10px; }

/* --- Focus visibility / accessibility ------------------------------------- */
.pd-filterbar select:focus-visible,
.pd-filterbar input:focus-visible,
.pd-filterbar a:focus-visible,
.pd-filterbar button:focus-visible {
  outline: none;
  box-shadow: var(--uf-focus-ring, 0 0 0 3px rgba(22,163,74,.28));
}

@media print {
  .pd-filterbar-actions, .pd-chart-toolbar, .pd-loading-overlay { display: none !important; }
}

/* Shared compare controls use the AgriFlood green/yellow identity. Risk
   category charts retain their own red/amber/green semantic palette. */
.pd-comparing .pd-compare-badge { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
.pd-comparing .pd-compare-context { border-color:#bbf7d0; background:#f7fef9; }
.pd-comparing .pd-compare-dimension { background:#dcfce7; color:#166534; }
.pd-compare-context.pd-risk-comparison { border-color:#fde68a; background:#fffbeb; }

/* Phase E: compact explicit navigation and deterministic municipality sorting. */
.phase-e-shortcut{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#166534;padding:6px 9px;font:600 11px/1.2 'DM Sans',sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.phase-e-shortcut:hover{border-color:#16a34a;background:#f0fdf4;color:#14532d}
.phase-e-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.phase-e-card-footer{display:flex;justify-content:flex-start;margin-top:14px;padding-top:10px;border-top:1px solid #e2e8f0}
.phase-e-linked-header{align-items:flex-start;flex-wrap:wrap}
.phase-e-linked-header>div:first-child{flex:1 1 300px;min-width:0}
.phase-e-linked-header .card-sub{max-width:100%;margin-top:4px;line-height:1.45}
.phase-e-linked-header>.phase-e-shortcut{flex:0 0 auto;margin-left:auto}
.phase-e-compact-header>div:first-child{flex-basis:100%}
.phase-e-compact-header>.phase-e-shortcut{margin-left:0}
.phase-e-sort{display:flex;flex-direction:column;gap:5px;min-width:260px;color:#475569;font-size:11px;font-weight:600}
.phase-e-sort select{min-height:38px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a;padding:7px 32px 7px 10px;font:500 12px 'DM Sans',sans-serif}
.muni-stats{flex-wrap:wrap;gap:4px 10px}
.crop-forecast-card .card-header>div:first-child{flex:1 1 280px;min-width:0}
.crop-forecast-card .crop-forecast-guide{margin-top:5px;max-width:100%;line-height:1.45}
.forecast-friendly-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0}.forecast-friendly-grid>div{padding:9px 10px;border:1px solid #dbe7f3;border-radius:8px;background:#fff}.forecast-friendly-grid span,.forecast-friendly-grid strong{display:block}.forecast-friendly-grid span{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#64748b;margin-bottom:3px}.forecast-friendly-grid strong{font-size:12px;line-height:1.38;color:#1e293b}.forecast-technical-details{margin:12px 0;padding-top:10px;border-top:1px solid #dbe7f3}.forecast-technical-details summary{cursor:pointer;color:#166534;font-weight:700}.forecast-technical-details .forecast-friendly-grid{margin-bottom:8px}
@media(max-width:760px){.phase-e-actions{justify-content:flex-start}.phase-e-sort{width:100%;min-width:0}.card-header{gap:10px;flex-wrap:wrap}.phase-e-linked-header>.phase-e-shortcut{margin-left:0}.chart-wrap{overflow:hidden}}