/* Colors and sizes mirror the widget's res/layout and res/drawable files (dp -> px). */
:root {
  --page: #0B0F14;
  --widget: #141A22;
  --widget-border: #252D3A;
  --card: #222A35;
  --text: #FFFFFF;
  --text-name: #E8EAED;
  --muted: #9AA0A6;
  --header: #D5C2BC;
  --accent: #FFDBCF;
  --on-accent: #1A1C1E;
  --green: #81C995;
  --red: #F28B82;
  --tint-positive: #81C99514;
  --tint-negative: #F28B8214;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); }
body {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.widget {
  max-width: 560px;
  margin: 0 auto;
  background: var(--widget);
  border: 1px solid var(--widget-border);
  border-radius: 16px;
  padding: 12px;
}

/* ---------- Header (widget_layout.xml) ---------- */
.widget-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.title { display: flex; flex-direction: column; min-width: 0; }
.title-text, .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-text { font-size: 14px; font-weight: bold; }
.subtitle { font-size: 10px; color: var(--muted); }
.spacer { flex: 1; }

.pill {
  height: 28px; min-width: 28px; padding: 0 10px;
  border: 0; border-radius: 16px; cursor: pointer;
  background: #8080801F; color: var(--accent);
  font-size: 11px; font-weight: bold; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
.pill.selected { background: var(--accent); color: var(--on-accent); }
.pill.icon { width: 28px; padding: 6px; }
.pill svg { width: 16px; height: 16px; fill: var(--accent); }
.pill[hidden] { display: none; }
.pill:disabled { opacity: 0.5; cursor: default; }

.message { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 8px; }
.message button { margin-top: 8px; }

/* ---------- Group header (widget_item_header.xml) ---------- */
.group-header {
  grid-column: 1 / -1;
  padding: 10px 4px 4px;
  color: var(--header); font-size: 10px; font-weight: bold; text-transform: uppercase;
}
.group-header::after { content: ""; display: block; height: 1px; margin-top: 2px; background: #FFFFFF25; }

/* ---------- Shared hints: tint = direction, border = market state, stripes = last session ---------- */
.item { position: relative; display: block; background: var(--card); overflow: hidden; }
.item.positive { background: linear-gradient(var(--tint-positive), var(--tint-positive)), var(--card); }
.item.negative { background: linear-gradient(var(--tint-negative), var(--tint-negative)), var(--card); }
.item.striped { --stripe: #9AA0A60F; background: repeating-linear-gradient(135deg, var(--stripe) 0 6px, transparent 6px 11.3px), var(--card); }
.item.striped.positive { --stripe: var(--tint-positive); }
.item.striped.negative { --stripe: var(--tint-negative); }
.item { --solid: #4A5A70; --dashed: #3C4043; }
.item.positive { --solid: #81C99560; --dashed: #81C99530; }
.item.negative { --solid: #F28B8260; --dashed: #F28B8230; }

.change .pct { font-weight: bold; }
.change .abs { color: var(--text); }
.change .pct.positive { color: var(--green); }
.change .pct.negative { color: var(--red); }
.change .pct.neutral, .secondary { color: var(--muted); }
.secondary { font-weight: normal; font-size: 0.85em; }
.decimal { font-size: 0.65em; }

.trend {
  width: 20px; height: 20px; padding: 4px; border-radius: 50%; flex: none;
  display: inline-flex;
}
.trend svg { width: 100%; height: 100%; }
.trend.up { background: #CEEAD6; fill: #188038; }
.trend.down { background: #FAD2CF; fill: #D93025; }
.trend.flat { background: #F1F3F4; fill: #5F6368; }
.trend.warning { background: #FEF7E0; fill: #EA8600; }

.spark { display: block; width: 100%; }

/* ---------- Cards (widget_item_featured.xml / widget_item_row.xml) ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.card { border-radius: 12px; border: 1.5px solid transparent; }
.card.border-solid { border-color: var(--solid); }
.card.border-dashed { border-style: dashed; border-color: var(--dashed); }
.card .body { padding: 8px 28px 8px 8px; }
.card .name { font-size: 12px; color: var(--text-name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .price { font-size: 16px; font-weight: bold; margin-top: 2px; }
.card .change { font-size: 12px; margin-top: 2px; }
.card .spark { height: 28px; }
.card .trend { position: absolute; top: 5px; right: 5px; }

.card.featured { grid-column: 1 / -1; }
.card.featured .body { padding: 8px; }
.card.featured .top { display: flex; align-items: center; justify-content: space-between; }
.card.featured .price { font-size: 32px; margin: 0; }
.card.featured .trend { position: static; width: 32px; height: 32px; padding: 6px; }
.card.featured .name { font-size: 13px; margin-top: 2px; }
.card.featured .change { font-size: 15px; margin: 2px 0 4px; }
.card.featured .spark { height: 32px; margin: 0 8px 8px; width: calc(100% - 16px); }

/* ---------- Table (widget_item_table_row.xml / widget_item_table_featured.xml) ---------- */
/* One grid shared by every row (subgrid), so name/price/change columns line up like the widget's measured widths.
   Columns: pad | arrow | name (content, max 130px) | sparkline (rest) | price | change | pad.
   The row's side padding is grid tracks, not CSS padding, because subgrid padding shifts the items off their tracks. */
.table { display: grid; grid-template-columns: 8px 20px minmax(40px, max-content) minmax(0, 1fr) auto auto 8px; row-gap: 1px; }
.table.daily { grid-template-columns: 8px 20px minmax(0, 1fr) 0 auto auto 8px; }
.row {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  align-items: center; padding: 7px 0;
}
.row .trend { grid-column: 2; }
.row .name { grid-column: 3; margin-left: 8px; max-width: 138px; font-size: 12px; color: var(--text-name);
  display: flex; align-items: baseline; white-space: nowrap; overflow: hidden; }
.row .name-text { overflow: hidden; text-overflow: ellipsis; }
.row .name .secondary { flex: none; }
.table.daily .row .name { grid-column: 3 / 5; max-width: none; }
.row .spark { grid-column: 4; margin-left: 6px; width: calc(100% - 6px); height: 20px; }
.row .price { grid-column: 5; margin-left: 6px; font-size: 13px; font-weight: bold; text-align: right; white-space: nowrap; }
.row .change { grid-column: 6; margin-left: 6px; font-size: 11px; text-align: right; white-space: nowrap; }
.row .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.row.border-solid .bar { background: var(--solid); }
.row.border-dashed .bar { background: repeating-linear-gradient(var(--dashed) 0 4px, transparent 4px 8px); }

.row.featured { padding: 9px 0; margin-bottom: 5px; }
.row.featured .name { font-size: 17px; font-weight: bold; color: var(--text); white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.row.featured .category { display: block; font-size: 0.75em; }
.row.featured .spark { height: 30px; }
.row.featured .price { font-size: 22px; }
.row.featured .change { font-size: 15px; }

/* Narrow widget: smaller price/change text, standing in for the widget's autoSizeTextType */
#list { container-type: inline-size; }
@container (max-width: 400px) {
  .row .price { font-size: 11px; }
  .row .change { font-size: 9px; }
  .row.featured .price { font-size: 17px; }
  .row.featured .change { font-size: 11px; }
  .row.featured .name { font-size: 15px; }
}

@media (hover: hover) {
  .item:hover { filter: brightness(1.12); }
  .pill:hover:not(:disabled) { filter: brightness(1.1); }
}

/* ---------- Settings dialog (MainScreen's Widget Options card) ---------- */
dialog {
  background: var(--widget); color: var(--text);
  border: 1px solid var(--widget-border); border-radius: 16px;
  padding: 16px; width: min(420px, calc(100vw - 32px));
}
dialog::backdrop { background: #000A; }
dialog h2 { margin: 0 0 4px; font-size: 16px; }
.hint { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.setting { margin-bottom: 12px; }
.setting-title { font-size: 12px; font-weight: bold; color: var(--header); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.done { width: 100%; }