/* The .tl-* and .pl-* component rules (the Plan budget card and its month steps, Summary's list rows and bars). The name is historical: the
 * Tactile and Instrument looks they were first written for are gone (5.57, 5.90), and 5.92 removed every selector written for them. What is
 * left is plain and used by Haven. */



/* --- Summary's top, Tactile's own layout (5.9, summary-looks.js) ---------
 * The mockup's instrument card: a big engraved figure, a pressed-in bar
 * with the spent figure inside it, and a notched metal track whose thumb is
 * today. Then plain raised rows with an outlined icon box. */
.tl-hero { border-radius: 18px; padding: var(--k-5) var(--k-4) var(--k-4); background: var(--t-raise); box-shadow: var(--t-shadow); margin-bottom: var(--k-3); }
.tl-k, .tl-label { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--k-text-3); }
.tl-label { color: var(--k-text-2); padding: var(--k-3) 2px 7px; border-bottom: 1px solid var(--k-hairline); margin-bottom: var(--k-2); }
.tl-big { margin-top: 10px; font-size: 50px; font-weight: 760; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--k-text); text-shadow: 0 2px 6px rgb(0 0 0 / 0.5); }
.tl-hero.is-negative .tl-big { color: var(--k-negative); }

.tl-prog { position: relative; margin-top: 18px; height: 26px; border-radius: 13px; background: var(--t-well); box-shadow: var(--t-well-shadow), 0 0 0 1.5px var(--t-metal); overflow: hidden; }
.tl-prog i { position: absolute; inset: 0 auto 0 0; border-radius: 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--k-accent), white 8%), color-mix(in srgb, var(--k-accent), black 28%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22); }
.tl-prog i.caution { background: linear-gradient(180deg, var(--k-warning), color-mix(in srgb, var(--k-warning), black 30%)); }
.tl-prog i.bad { background: linear-gradient(180deg, var(--k-negative), color-mix(in srgb, var(--k-negative), black 30%)); }
.tl-prog > span { position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 11px; font-size: 12.5px; font-weight: 650; color: var(--k-text); text-shadow: 0 1px 2px rgb(0 0 0 / 0.5); }
.tl-slider { position: relative; height: 30px; margin-top: 48px; }
.tl-trk, .tl-fill { position: absolute; left: 0; top: 9px; height: 10px; border-radius: 5px; }
.tl-trk { right: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--k-surface), white 12%), var(--k-surface)); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.7), 0 0 0 1px color-mix(in srgb, var(--k-surface), white 18%); }
.tl-fill { background: linear-gradient(180deg, var(--k-accent), color-mix(in srgb, var(--k-accent), black 30%)); }
.tl-thumb { position: absolute; top: 0; width: 18px; height: 28px; margin-left: -9px; border-radius: 5px; background: linear-gradient(180deg, #e3dcd5, #8e857e); box-shadow: inset 0 1px 0 #fff, 0 3px 6px rgb(0 0 0 / 0.6); }
.tl-thumb::after { content: ""; position: absolute; left: 8px; top: 7px; width: 2px; height: 14px; background: rgb(0 0 0 / 0.25); }
.tl-tip { position: absolute; bottom: 36px; transform: translateX(-50%); white-space: nowrap; padding: 5px 9px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--k-text); background: var(--t-raise); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 4px 10px rgb(0 0 0 / 0.5); }
.tl-ticks { display: flex; justify-content: space-between; padding: 0 1px; margin-top: 4px; }
.tl-ticks i { width: 1px; height: 5px; background: var(--k-text-3); opacity: .6; }
.tl-line { margin: 12px 0 0; font-size: 14.5px; color: var(--k-text-2); }
.tl-line.caution { color: var(--k-warning); } .tl-line.bad { color: var(--k-negative); }
.tl-list { display: grid; gap: 8px; margin-bottom: var(--k-3); }
.tl-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; font: inherit; color: var(--k-text); text-align: left; background: var(--t-raise); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 2px 3px rgb(0 0 0 / 0.45), 0 6px 12px rgb(0 0 0 / 0.3); }
button.tl-item { cursor: pointer; }
.tl-ibox { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--k-accent-text); border: 1px solid color-mix(in srgb, var(--k-text) 18%, transparent); background: var(--t-well); box-shadow: var(--t-well-shadow); }
.tl-ibox svg { width: 18px; height: 18px; }
.tl-grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tl-t { font-size: 15.5px; font-weight: 650; }
.tl-s { font-size: 12.5px; color: var(--k-text-3); }
.tl-v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-v.tl-ok { color: var(--k-positive); } .tl-v.tl-bad { color: var(--k-negative); }
.tl-chev { display: grid; color: var(--k-text-3); } .tl-chev svg { width: 16px; height: 16px; }
.tl-badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--k-warning), black 10%), color-mix(in srgb, var(--k-warning), black 32%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2); justify-self: start; }

/* 5.10: the same figures as every style, in Tactile's material. */
.tl-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--k-3); }
.tl-period { font-size: 12.5px; color: var(--k-text-3); font-variant-numeric: tabular-nums; }
.tl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.tl-stats > div { display: grid; gap: 4px; padding: 9px 10px; border-radius: 12px; background: var(--t-well); box-shadow: var(--t-well-shadow); }
.tl-stats .tl-k { font-size: 10.5px; }
.tl-stats b { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--k-text); }
.tl-prog--aside { margin-top: 8px; }
.tl-prog--aside i { background: linear-gradient(180deg, color-mix(in srgb, var(--k-violet), white 6%), color-mix(in srgb, var(--k-violet), black 30%)); }
.tl-card { padding: 14px 16px 12px; margin-bottom: var(--k-3); border-radius: 18px; background: var(--t-raise); box-shadow: var(--t-shadow); }
.tl-mid { font-size: 20px; font-weight: 760; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--k-text); }
.tl-cols { display: flex; gap: 8px; height: 84px; margin-top: 12px; }
.tl-cols > span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.tl-cols i { position: relative; width: 100%; max-width: 26px; border-radius: 7px; background: var(--t-well); box-shadow: var(--t-well-shadow); min-height: 6px; }
.tl-cols i.lit { background: linear-gradient(180deg, color-mix(in srgb, var(--k-accent), white 10%), color-mix(in srgb, var(--k-accent), black 25%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 0 12px color-mix(in srgb, var(--k-accent) 45%, transparent); }
.tl-cols small { font-size: 11px; font-weight: 650; color: var(--k-text-3); }
.tl-item--cards { flex-wrap: wrap; }
.tl-item--cards .tl-grow { gap: 4px; }
.tl-cards { flex-basis: 100%; display: grid; gap: 9px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--k-hairline); }
.tl-cardrow { display: grid; grid-template-columns: 74px 1fr 84px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--k-text-2); }
.tl-thin { display: block; height: 8px; border-radius: 4px; background: var(--t-well); box-shadow: var(--t-well-shadow); overflow: hidden; }
.tl-thin i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--k-accent), black 15%), var(--k-violet)); box-shadow: 0 0 6px color-mix(in srgb, var(--k-violet) 50%, transparent); }
.tl-cardamt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--k-text); }
.tl-badge { margin-top: 2px; }
.tl-label { display: flex; justify-content: space-between; align-items: baseline; }
.tl-still { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--k-text-2); }

/* --- Plan, after the mockup (5.14) ---------------------------------------
 * The budget on a raised card over an inset bar split into its parts
 * (copper, amber, metal, green) with a legend; the month as the board's
 * five-step process - glowing copper circles for what is paid, dim raised
 * ones for what is to come, red for late; set-asides as thin inset bars. */
.pl-top--tactile { padding: var(--k-5) var(--k-4) var(--k-4); border-radius: 18px; background: var(--t-raise); box-shadow: var(--t-shadow); }
.pl-seg { display: flex; gap: 3px; height: 20px; margin-top: 16px; padding: 4px; border-radius: 10px; background: var(--t-well); box-shadow: var(--t-well-shadow); }
.pl-seg i { border-radius: 6px; min-width: 4px; }
.pl-top--tactile .is-must { background: linear-gradient(180deg, color-mix(in srgb, var(--k-accent), white 8%), color-mix(in srgb, var(--k-accent), black 30%)); }
.pl-top--tactile .is-flex { background: linear-gradient(180deg, var(--k-warning), color-mix(in srgb, var(--k-warning), black 32%)); }
.pl-top--tactile .is-free { background: linear-gradient(180deg, #d9d2cb, #8e857e); }
.pl-top--tactile .is-saved { background: linear-gradient(180deg, var(--k-positive), color-mix(in srgb, var(--k-positive), black 25%)); }

/* Tactile (5.38): the raised pill of the tab bar and of a toggle glides to the choice. */