/* The Search answer document (step 2.7): commons-chat's answer page styles
   (engine/ask_ui.html at 82e934f), scoped under .dws so they reach only a
   Search answer in the drawer; the page chrome (top bar, hero, composer) is the
   drawer's own. Generated by scoping; edit with care. */
.dws {--bg:#E4E6E8; --bg-card:#FFFFFF; --bg-rail:#F4F5F7;
    --ink-1:#0F1B2A; --ink-2:#3A4A5C; --ink-3:#6A7585; --ink-4:#9AA4B2;
    --line-1:#E4E7EC; --line-2:#D0D5DD;
    --dw-blue:#2D6A99; --dw-blue-dark:#003A66; --dw-orange:#E8872A;
    --ok:#1D8C6B; --warn:#C08A20; --stale:#B8486E;
    --north:#2D6A99; --south:#BE5A38;
    --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans:'Manrope', -apple-system, system-ui, sans-serif;
    --accent-soft:#E8F0F6; --line: var(--line-1); --measure: 760px; --wide: 1040px;}
.dws * {box-sizing: border-box;}
.dws {margin: 0; background: var(--bg); color: var(--ink-2); font: 18px/1.6 var(--sans);}
@media (max-width: 700px) {
  .dws {font-size: 17px;}
}
.dws .readas {display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font: 12px var(--mono); color: #BFD3E4;}
.dws .readas .chip {background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 999px; padding: 5px 12px; font: 12.5px var(--sans); text-decoration: none;}
.dws .readas a.chip:hover {background: rgba(255,255,255,.22);}
.dws .readas .chip b {font-weight: 700;}
.dws .readas .note {color: #FFD3B0; font: 12.5px var(--sans);}
.dws .measure {max-width: var(--measure);}
.dws .kicker {font: 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);}
.dws .lede {display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: stretch; margin: 0 0 44px;}
.dws .lede.nofig {grid-template-columns: minmax(0, 1fr);}
@media (max-width: 760px) {
  .dws .lede {grid-template-columns: 1fr;}
}
.dws .tile {background: var(--ink-1); color: #fff; border-radius: 16px; padding: 24px 26px 22px; box-shadow: 0 14px 34px rgba(15,27,42,.22); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;}
.dws .tile::after {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--dw-orange);}
.dws .tile .what {font: 600 13.5px/1.35 var(--sans); color: #BFD3E4;}
.dws .tile .big {font: 700 48px/1 var(--mono); color: #fff; letter-spacing: -0.03em; margin: 10px 0 2px; display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0 5px; white-space: nowrap;}
.dws .tile .big.long {font-size: 38px;}
.dws .tile .big .unit {font: 500 13px var(--mono); color: #BFD3E4; letter-spacing: 0;}
.dws .tile .when {font: 11.5px var(--mono); color: #8FB0CA; margin-top: 10px;}
.dws .tile .when .partial {color: #F5A860;}
.dws .take {background: var(--bg-card); border-radius: 16px; padding: 26px 30px; box-shadow: 0 14px 34px rgba(15,27,42,.14); font: 500 22px/1.45 var(--sans); color: var(--ink-1); display: flex; align-items: center;}
.dws .take b, .dws .doc p b, .dws .doc li b, .dws .doc .insight b {font-family: var(--mono); font-weight: 600; font-size: 0.93em; color: var(--ink-1);}
.dws span.fig {white-space: nowrap;}
.dws span.u {font-family: var(--sans); font-weight: 400; font-size: 0.8em; color: var(--ink-3); margin-left: 4px;}
.dws span.u.k {margin-left: 1px; letter-spacing: 0; font-size: 0.62em;}
.dws h4 span.u.k {font-size: 0.6em;}
.dws .tile .big .unit, .dws .cityplus .big .unit {font-size: 12px;}
.dws h4 span.u {font-weight: 500; font-size: 0.72em;}
.dws .doc {color: var(--ink-2);}
.dws .doc h3 {font: 11.5px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dw-blue); margin: 42px 0 12px; padding-top: 14px; position: relative;}
.dws .doc h3::before {content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 3px; background: var(--dw-orange); border-radius: 2px;}
.dws .doc h3:first-child {margin-top: 0;}
.dws .doc p {margin: 0 0 16px;}
.dws .doc ul {margin: 0 0 16px; padding-left: 0; list-style: none;}
.dws .doc li {margin: 0 0 10px; padding-left: 22px; position: relative;}
.dws .doc li::before {content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--dw-blue); opacity: .55;}
.dws .doc .insight {background: linear-gradient(180deg, #EEF4F9, #E6EFF6); border: 1px solid #D5E3EE; padding: 18px 22px 18px 22px; border-radius: 14px; margin: 22px 0 26px; color: var(--ink-1); font-size: 18.5px;}
.dws .doc .card.diverge {margin: 18px 0 30px; padding: 22px 26px 14px;}
.dws .doc .card.diverge h4 {font-size: 19px;}
.dws .dlabel {font: 500 13.5px/1.2 var(--sans); color: var(--ink-1); height: 100%; display: flex; align-items: center; justify-content: flex-end; text-align: right;}
.dws .dlabel a.tract {border-bottom-style: dotted;}
.dws .doc .insight::before {content: "Key insight"; display: block; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dw-blue); margin-bottom: 8px;}
.dws sup.ref {font: 11px var(--mono); vertical-align: super; line-height: 0; margin-left: 2px;}
.dws sup.ref a {color: var(--dw-blue); text-decoration: none;}
.dws sup.ref a:hover {text-decoration: underline;}
.dws .card {background: var(--bg-card); border: 1px solid var(--line-1); border-radius: 16px; padding: 26px 30px 18px; margin: 36px 0; box-shadow: 0 6px 22px rgba(15,27,42,.08);}
.dws .card .ck {font: 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dw-blue); margin-bottom: 8px;}
.dws .card h4 {margin: 0 0 4px; font: 700 23px/1.25 var(--sans); letter-spacing: -0.012em; color: var(--ink-1);}
.dws .card .subt {font: 14.5px var(--sans); color: var(--ink-3); margin-bottom: 16px;}
.dws .card .src {font: 11.5px var(--mono); color: var(--ink-3); margin-top: 10px; line-height: 1.7;}
.dws .card .src a {color: var(--dw-blue);}
.dws .card .foot {display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-1); font: 11.5px var(--mono); color: var(--ink-3);}
.dws .card .foot a, .dws .card .foot button {color: var(--dw-blue); text-decoration: none; cursor: pointer; background: none; border: 0; font: inherit; padding: 0;}
.dws .card .foot a:hover, .dws .card .foot button:hover {text-decoration: underline;}
.dws .chart svg {width: 100%; height: auto; display: block; font: 12px var(--mono); fill: var(--ink-3);}
.dws .chart svg text {font: 12px var(--mono); fill: var(--ink-3);}
.dws .legend {display: flex; flex-wrap: wrap; gap: 6px 16px; font: 12px var(--mono); color: var(--ink-3); margin-top: 8px;}
.dws .legend span {display: inline-flex; align-items: center; gap: 6px;}
.dws .legend i {width: 16px; height: 3px; display: inline-block;}
.dws details.data {margin-top: 10px;}
.dws details.data summary {cursor: pointer; font: 11.5px var(--mono); color: var(--dw-blue); list-style: none;}
.dws details.data summary::before {content: "▸ ";}
.dws details.data[open] summary::before {content: "▾ ";}
.dws .scroll {overflow: auto; max-height: 420px; margin-top: 10px; border: 1px solid var(--line-1); border-radius: 8px;}
.dws table {border-collapse: collapse; width: 100%; font-size: 14px;}
.dws th {font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line-2); background: var(--bg-card); position: sticky; top: 0;}
.dws td {padding: 8px 12px; border-bottom: 1px solid var(--line-1); color: var(--ink-2);}
.dws td.num, .dws th.num {text-align: right; font-family: var(--mono); font-size: 13px;}
.dws tr.hi td {background: #FFF4E8; font-weight: 600;}
.dws .readout {font-size: 14px; color: var(--ink-2); min-height: 22px; margin-top: 8px;}
.dws .cityplus {background: linear-gradient(180deg, #FFF9F3, #FFFFFF); border-color: #F3DCC6;}
.dws .cityplus .ck {color: #C9661A;}
.dws .cityplus .grid {display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px 28px; align-items: start;}
@media (max-width: 760px) {
  .dws .cityplus .grid {grid-template-columns: 1fr;}
}
.dws .cityplus .big {font: 700 40px/1 var(--mono); color: var(--ink-1); margin: 4px 0 6px; display: flex; align-items: baseline; gap: 0 5px; flex-wrap: wrap;}
.dws .cityplus .big .unit {font: 500 12px var(--mono); color: var(--ink-3);}
.dws .cityplus .trend {font-size: 16px; color: var(--ink-2);}
.dws .cityplus .peer {font: 12px var(--mono); color: var(--ink-3); margin-top: 10px;}
.dws .cityplus .open {font: 12px var(--mono); margin-top: 12px;}
.dws .cityplus .open a {color: var(--dw-blue); text-decoration: none;}
.dws .spark {display: block; margin: 8px 0 2px;}
.dws .evidence .ck {color: #6B4FA0;}
.dws .evidence {background: linear-gradient(180deg, #F8F6FC, #FFFFFF); border-color: #E3DCF0;}
.dws .evidence .piece {padding: 14px 0; border-top: 1px solid var(--line-1);}
.dws .evidence .piece:first-of-type {border-top: 0;}
.dws .evidence .ttl {display: block; font: 600 17px var(--sans); color: var(--dw-blue); text-decoration: none; margin: 4px 0 6px;}
.dws .evidence .ttl:hover {text-decoration: underline;}
.dws .evidence .desc {font-size: 15px; color: var(--ink-2); line-height: 1.55;}
.dws .evidence .by {font: 11.5px var(--mono); color: var(--ink-3); margin-top: 6px;}
.dws .evidence .by a {color: var(--dw-blue);}
.dws .evidence details {margin-top: 6px; font-size: 14px; color: var(--ink-3);}
.dws .evidence summary {cursor: pointer; font: 11.5px var(--mono); color: var(--dw-blue);}
.dws .evidence details div {margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--line-1); white-space: pre-line; line-height: 1.5;}
.dws .sources {margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--line-2); font: 12.5px var(--mono); color: var(--ink-3); line-height: 1.8;}
.dws .sources [id^=src-] {scroll-margin-top: 80px; scroll-margin-bottom: 140px;}
.dws .sources [id^=src-]:target {background: #FFF1E3; border-radius: 6px; padding: 2px 6px; margin-left: -6px;}
.dws .sources .kicker {margin-bottom: 8px;}
.dws .sources a {color: var(--dw-blue);}
.dws .sources .d {color: var(--ink-4);}
.dws .next {margin-top: 40px;}
.dws .next .chips {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;}
.dws .next .chip {font: 14px var(--sans); color: var(--dw-blue-dark); background: var(--bg-card); border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 16px; cursor: pointer; box-shadow: 0 1px 3px rgba(15,27,42,.06);}
.dws .next .chip:hover {border-color: var(--dw-blue); background: #EEF4F9;}
.dws .status {font: 12px var(--mono); color: var(--ink-3); margin: 10px 0 30px; display: flex; align-items: center; gap: 10px;}
.dws .status .dot {width: 10px; height: 10px; border-radius: 50%; background: var(--dw-orange); animation: pulse 1.1s infinite;}
.dws 0%, .dws 100% {opacity: .35;}
.dws 50% {opacity: 1;}
.dws .warn {background: #FFF4E5; border: 1px solid #F3C98B; border-left: 6px solid var(--dw-orange); border-radius: 14px; padding: 18px 22px; margin: 0 0 22px; box-shadow: 0 14px 34px rgba(15,27,42,.12);}
.dws .warn .ck {font: 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: #B85C00; margin-bottom: 6px;}
.dws .warn .t {font: 600 18px/1.45 var(--sans); color: var(--ink-1);}
.dws .warn .d {font-size: 15px; color: var(--ink-2); margin-top: 8px;}
.dws .decline {background: var(--bg-card); border: 1px solid #EBD2DC; border-radius: 16px; padding: 22px 28px; font-size: 20px; color: var(--ink-1); margin-bottom: 30px; box-shadow: 0 14px 34px rgba(15,27,42,.14);}
.dws .decline::before {content: attr(data-k); display: block; font: 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--stale); margin-bottom: 8px;}
.dws .status {background: var(--bg-card); border-radius: 16px; padding: 22px 28px; box-shadow: 0 14px 34px rgba(15,27,42,.14);}
.dws .followup {position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 14px 24px 18px; background: linear-gradient(to top, rgba(228,230,232,1) 70%, rgba(228,230,232,0)); pointer-events: none;}
.dws .followup .box, .dws .followup .fine {pointer-events: auto;}
@media (max-width: 700px) {
  .dws .followup {padding: 10px 12px 12px;}
  .dws .followup .box {padding-left: 12px;}
  .dws .followup .ctx {max-width: 45%;}
}
.dws .followup .box {max-width: var(--wide); margin: 0 auto; background: var(--bg-card); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 10px 30px rgba(15,27,42,.14); padding: 8px 8px 8px 18px; display: flex; align-items: center; gap: 10px;}
.dws .followup input {flex: 1; min-width: 0; border: 0; outline: none; font: 17px var(--sans); color: var(--ink-1); background: transparent; padding: 10px 0;}
.dws .followup .ctx {display: inline-flex; align-items: center; gap: 6px; max-width: min(380px, 50%); flex: none; min-width: 0; background: #EEF4F9; border: 1px solid #D5E3EE; border-radius: 999px; padding: 5px 6px 5px 10px; font: 12.5px var(--sans); color: var(--dw-blue-dark);}
.dws .followup .ctx .arrow {color: var(--dw-blue); font-size: 13px;}
.dws .followup .ctx .lbl {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dws .followup .ctx button {width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(45,106,153,.12); color: var(--dw-blue-dark); cursor: pointer; font: 600 13px/1 var(--sans); padding: 0; flex: none;}
.dws .followup .ctx button:hover {background: var(--dw-blue); color: #fff;}
.dws .followup .go {width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--dw-blue); color: #fff; font: 700 18px var(--sans); cursor: pointer;}
.dws .followup .go:hover {background: var(--dw-blue-dark);}
.dws .followup .fine {max-width: var(--wide); margin: 8px auto 0; text-align: center; font: 11.5px var(--mono); color: var(--ink-3);}
.dws .cardtip {position: fixed; z-index: 60; width: 324px; background: var(--bg-card); border: 1px solid var(--line-1); border-radius: 14px; padding: 16px 18px 14px; box-shadow: 0 16px 40px rgba(15,27,42,.22); font: 13.5px/1.45 var(--sans); color: var(--ink-2);}
.dws .cardtip .ck {font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: #C9661A;}
.dws .cardtip .ttl {font: 700 16px var(--sans); color: var(--ink-1); margin: 4px 0 6px; letter-spacing: -0.01em;}
.dws .cardtip .fig {display: flex; align-items: baseline; gap: 4px;}
.dws .cardtip .fig b {font: 700 30px/1 var(--mono); color: var(--ink-1); letter-spacing: -0.02em;}
.dws .cardtip .fig .unit {font: 500 11px var(--mono); color: var(--ink-3);}
.dws .cardtip .fig .yr, .dws .cardtip .peer .yr {font: 11px var(--mono); color: var(--ink-4); margin-left: 6px;}
.dws .cardtip .spark {display: block; margin: 8px 0 2px; max-width: 100%; height: auto;}
.dws .cardtip .trend {font-size: 13px; color: var(--ink-2); margin-top: 8px;}
.dws .cardtip .peer {font-size: 12.5px; color: var(--ink-2); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-1);}
.dws .cardtip .peer b {font-family: var(--mono); font-weight: 600; color: var(--ink-1);}
.dws .cardtip .open {margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;}
.dws .cardtip .open > a:not(.btn) {font: 600 12px var(--sans); color: var(--dw-blue); text-decoration: none; white-space: nowrap;}
.dws .cardtip .open > a:not(.btn):hover {text-decoration: underline;}
.dws .cardtip .open .btn {font: 600 12px var(--sans); color: #fff; background: var(--dw-blue); text-decoration: none; padding: 7px 12px; border-radius: 8px;}
.dws .cardtip .open .btn:hover {background: var(--dw-blue-dark);}
.dws .cardtip .open span {font: 10.5px var(--mono); color: var(--ink-4); margin-left: auto; text-align: right;}
.dws .readtip {position: fixed; pointer-events: none; z-index: 70; min-width: 150px; background: var(--bg-card); border: 1px solid var(--line-1); border-radius: 10px; padding: 9px 12px; box-shadow: 0 8px 24px rgba(15,27,42,.18); font: 13px var(--sans); color: var(--ink-2);}
.dws .readtip .kicker {font-size: 10.5px; margin-bottom: 5px; color: var(--ink-3);}
.dws .readtip .row {display: flex; align-items: center; gap: 8px; padding: 2px 0; white-space: nowrap;}
.dws .readtip .row i {width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none;}
.dws .readtip .row .l {color: var(--ink-2);}
.dws .readtip .row .v {margin-left: auto; padding-left: 14px; font: 600 13px var(--mono); color: var(--ink-1);}
.dws a.tract {color: var(--dw-blue); text-decoration: none; border-bottom: 1.5px dotted var(--dw-blue); cursor: pointer;}
.dws a.fold {color: var(--dw-blue); text-decoration: none; border-bottom: 1.5px solid #B9CEDF;}
.dws a.fold:hover {border-bottom-color: var(--dw-blue);}
.dws .listing .lgroup {margin: 14px 0 0;}
.dws .listing .lgroup .kicker {margin-bottom: 6px;}
.dws .listing .chips {display: flex; flex-wrap: wrap; gap: 6px 8px;}
.dws .listing a.chip {font: 13.5px var(--sans); color: var(--dw-blue-dark); background: var(--bg-rail); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; text-decoration: none; display: inline-flex; align-items: baseline; gap: 7px;}
.dws .listing a.chip:hover {border-color: var(--dw-blue); background: #EEF4F9;}
.dws .listing a.chip small {font: 10.5px var(--mono); color: var(--ink-4);}
.dws .listing button.showall {font: 600 13px var(--sans); color: var(--dw-blue); background: none; border: 1.5px dashed var(--line-2); border-radius: 999px; padding: 6px 12px; cursor: pointer;}
.dws a.ask {color: var(--ink-1); text-decoration: none; border-bottom: 1.5px dotted #B9CEDF;}
.dws a.ask:hover {color: var(--dw-blue); border-bottom-color: var(--dw-blue);}
.dws a.tract:hover {background: #EEF4F9;}
.dws .tracttip {position: fixed; z-index: 60; width: 500px; max-width: calc(100vw - 16px); background: var(--bg-card); border: 1px solid var(--line-1); border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 16px 40px rgba(15,27,42,.22); font: 13px/1.4 var(--sans); color: var(--ink-2);}
.dws .tracttip .ck {font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--dw-blue); margin-bottom: 6px; padding-right: 24px;}
.dws .tracttip .head {display: flex; align-items: baseline; justify-content: space-between; gap: 10px;}
.dws .tracttip .ttl {font: 700 16px var(--sans); color: var(--ink-1);}
.dws .tracttip .val {font: 700 20px var(--mono); color: #C9661A;}
.dws .tracttip .sub {font-size: 12px; color: var(--ink-3); margin: 2px 0 8px;}
.dws .tracttip .chart svg {width: 100%; height: auto; display: block;}
.dws .tracttip .legend {font-size: 11px; margin-top: 6px;}
.dws .tracttip .open {margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px;}
.dws .tracttip .open .btn {font: 600 12px var(--sans); color: #fff; background: var(--dw-blue); text-decoration: none; padding: 7px 12px; border-radius: 8px;}
.dws .tracttip .open .btn:hover {background: var(--dw-blue-dark);}
.dws .tracttip .open span {font: 10.5px var(--mono); color: var(--ink-4);}
.dws .tracttip .x {position: absolute; top: 8px; right: 10px; border: 0; background: none; font: 18px var(--sans); color: var(--ink-3); cursor: pointer;}
.dws { font-size: 16px; background: transparent; }
/* In the drawer: the write-up sits on a white card like the takeaway and the charts
   (commons-chat's page set it on a light ground; the drawer's ground is dark). */
.dws .doc:not(:empty) { background: var(--bg-card); border-radius: 16px; padding: 16px 26px; margin: 0 0 22px; }
.dws .decline { color: var(--ink-1); }