/* Alfie — app-specific overrides on top of picocss. Flat by intent: no radii, no shadows. */

/* ---- Top bar: icon-only nav, sections left, utilities right ---- */
header nav a {
    color: var(--pico-muted-color);
    padding: 0;
}
header nav a:hover {
    color: var(--pico-primary);
}
header nav a[aria-current="page"] {
    color: var(--pico-color);
}
header nav li {
    padding: 0.5rem 0.45rem;
}
header nav svg {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    margin-left: .8rem;
}
/* Seven icons at 2.4rem need ~459px; a 390px phone offers ~358px. Pico's nav items are
   inline-block and won't shrink, so the right-hand group — sign-out included — slides off
   the viewport and becomes untappable. Scale the icons down on small screens, and let the
   bar wrap rather than clip if it ever still runs out of room. */
header nav { flex-wrap: wrap; }
@media (max-width: 576px) {
    header nav li  { padding: 0.5rem 0.3rem; }
}

/* ---- Ledger table: date | comments | amount | delete ----
   Striping, borders and full width come from pico. These rules only tighten the padding
   (four columns at pico's 1rem gutters do not fit a phone) and pin the three narrow
   columns so the description gets the leftover width. */
table.ledger :is(th, td)              { padding: 0.4rem 0.5rem; }
table.ledger :is(th, td):first-child  { padding-left: 0; }
table.ledger :is(th, td):last-child   { padding-right: 0; }
table.ledger .date {
    width: 1px;
    white-space: nowrap;
    color: var(--pico-muted-color);
    font-variant-numeric: tabular-nums;
}
table.ledger .count {
    width: 1px;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
table.ledger .act-col { width: 1px; }
table.ledger form     { margin: 0; }

/* ---- Bank / points add row: comments 7 : count 3, button hugs its label ----
   Pico hands every [role=group] child `flex: 1 1 auto`, which splits the row evenly and
   lets the button shrink until a two-character Chinese label breaks across two lines.
   flex-basis 0 makes 7:3 a true ratio of the whole row rather than of the leftover space;
   min-width 0 is what allows the inputs to shrink past their default intrinsic width. */
.entry-form > input[name="comments"] { flex: 7 1 0; min-width: 0; }
.entry-form > input[name="count"]    { flex: 3 1 0; min-width: 0; }
.entry-form > button                 { flex: 0 0 auto; white-space: nowrap; }

/* ---- Investment cards: two flat rows per holding ---- */
ul.cards {
    list-style: none;
    padding: 0;
}
ul.cards li {
    border: 1px solid var(--pico-muted-border-color);
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.5rem;
    list-style: none;
}
.line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
}
.line .grow  { flex: 1; }
.line svg    { vertical-align: -0.2em; }
.line form   { margin: 0; }
.line button { margin: 0; padding: 0.1rem 0.5rem; width: auto; }

/* Edit / delete on both the ledger rows and the investment cards: icon-only, borrowing the
   muted link colour instead of button chrome. */
.act {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pico-muted-color);
    cursor: pointer;
}
.act:hover { color: var(--pico-primary); }
.act svg   { width: 1.15rem; height: 1.15rem; }

.meta {
    font-size: 0.85rem;
    color: var(--pico-muted-color);
    margin-top: 0.2rem;
}
.code {
    font-family: var(--pico-font-family-monospace);
    font-size: 0.85rem;
    color: var(--pico-muted-color);
}
.tag {
    font-size: 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    padding: 0 0.35rem;
    color: var(--pico-muted-color);
}
.count, .pl { font-variant-numeric: tabular-nums; }
.pl.up      { color: var(--pico-ins-color); }
.pl.down    { color: var(--pico-del-color); }

/* ---- Add form ----
   name / date full width, then type|currency and cost|market value paired, then the
   dividend switch beside the "more" disclosure. Collapses to one column at pico's own
   768px breakpoint. Vertical rhythm comes from pico's field margins, so the grid only
   sets a column gap. */
/* "新增" sits under the list, left-aligned; the form below it is shared with the edit icons */
button.add {
    width: auto;
    margin-bottom: var(--pico-spacing);
}
.invest-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}
/* Two columns hold up even on a phone (≈155px each at 390px), so there is no single-column
   breakpoint. min-width:0 is what keeps a long <option> label from widening its column. */
.invest-form > *   { min-width: 0; }
.invest-form .full { grid-column: 1 / -1; }
.invest-form .switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--pico-spacing);
}
.invest-form .switch input { margin: 0; }
.invest-form .more {
    justify-self: end;
    align-self: center;
    margin-bottom: var(--pico-spacing);
    font-size: 0.9rem;
}
/* Same chevron pico puts on `details summary`, so the disclosure reads as one of its own:
   -90deg when closed, upright when open, with pico's transition. */
.invest-form .more::after {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-inline-start: calc(var(--pico-spacing) * 0.5);
    transform: rotate(-90deg);
    background-image: var(--pico-icon-chevron);
    background-position: center;
    background-size: 1rem auto;
    background-repeat: no-repeat;
    vertical-align: -0.2em;
    content: "";
    transition: transform var(--pico-transition);
}
.invest-form .more[aria-expanded="true"]::after { transform: rotate(0); }
.invest-form button { width: auto; justify-self: start; }
.invest-form .actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ---- About page ----
   Everything else comes from pico's default table styling; these two only place the
   sub-limit on its own line and colour the penalties. */
table.rules td small { display: block; }
table.rules td.minus { color: var(--pico-del-color); }

/* ---- Form error message ---- */
.error {
    color: var(--pico-del-color);
    font-weight: bold;
}

/* ---- Flatten pico's card/modal chrome ---- */
article {
    border-radius: 0;
    box-shadow: none;
}
/* Summary line (ledger balance, investment totals): right-aligned, one row, no decimals.
   Section headings elsewhere — e.g. the about page — keep the normal left alignment. */
h2.totals {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 1.2rem;
    font-variant-numeric: tabular-nums;
}