@layerfi/components 0.1.131-alpha → 0.1.132-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -529,6 +529,12 @@
529
529
  .Layer__component .recharts-responsive-container.Layer__chart-container {
530
530
  padding-top: 42px;
531
531
  }
532
+ .Layer__UI__Chart--focusReset .recharts-wrapper:focus,
533
+ .Layer__UI__Chart--focusReset .recharts-wrapper :focus,
534
+ .Layer__UI__Chart--focusReset .recharts-surface:focus,
535
+ .Layer__UI__Chart--focusReset .recharts-bar-rectangle:focus {
536
+ outline: none;
537
+ }
532
538
  .Layer__chart-wrapper {
533
539
  position: relative;
534
540
  }
@@ -3836,44 +3842,6 @@ tbody .Layer__table__empty-row:first-child {
3836
3842
  justify-content: flex-start;
3837
3843
  padding-right: var(--spacing-lg);
3838
3844
  }
3839
- .Layer__profit-and-loss-detailed-charts__header--tablet,
3840
- .Layer__profit-and-loss-detailed-charts__header {
3841
- display: flex;
3842
- align-items: flex-start;
3843
- justify-content: space-between;
3844
- padding: var(--spacing-lg);
3845
- padding-bottom: var(--spacing-lg);
3846
- box-shadow: 0 -1px 0 0 var(--color-base-300) inset;
3847
- }
3848
- .Layer__profit-and-loss-detailed-charts__header--tablet button.Layer__btn.Layer__btn--icon-only,
3849
- .Layer__profit-and-loss-detailed-charts__header button.Layer__btn.Layer__btn--icon-only {
3850
- height: 32px;
3851
- min-height: 32px;
3852
- width: 32px;
3853
- padding: 0;
3854
- }
3855
- header.Layer__profit-and-loss-detailed-charts__header--tablet {
3856
- display: none;
3857
- gap: var(--spacing-md);
3858
- align-items: center;
3859
- justify-content: flex-start;
3860
- }
3861
- @container (max-width: 1023px) and (min-width: 768px) {
3862
- header.Layer__profit-and-loss-detailed-charts__header {
3863
- display: none;
3864
- }
3865
- header.Layer__profit-and-loss-detailed-charts__header--tablet {
3866
- display: flex;
3867
- }
3868
- }
3869
- .Layer__profit-and-loss-detailed-charts__head {
3870
- display: flex;
3871
- flex-direction: column;
3872
- gap: var(--spacing-4xs);
3873
- }
3874
- .Layer__profit-and-loss-detailed-charts__head > .Layer__text {
3875
- margin: 0;
3876
- }
3877
3845
  .Layer__ProfitAndLossDetailedCharts__DatePickerHeader--tablet {
3878
3846
  display: none;
3879
3847
  }
@@ -3954,9 +3922,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
3954
3922
  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper .Layer__Span {
3955
3923
  margin: 0 1rem;
3956
3924
  }
3957
- .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .date {
3958
- display: none;
3959
- }
3960
3925
  }
3961
3926
  .Layer__tooltip {
3962
3927
  box-sizing: border-box;
@@ -4057,7 +4022,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
4057
4022
  border-bottom-right-radius: 0;
4058
4023
  }
4059
4024
  }
4060
- .Layer__actionable_row {
4025
+ @charset "UTF-8";.Layer__actionable_row {
4061
4026
  display: flex;
4062
4027
  gap: var(--spacing-md);
4063
4028
  align-items: center;
@@ -4627,11 +4592,11 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
4627
4592
  .Layer__UI__tooltip-trigger {
4628
4593
  overflow: hidden;
4629
4594
  text-overflow: ellipsis;
4630
- }.Layer__Header,
4595
+ }
4596
+ .Layer__Header,
4631
4597
  .Layer__Label,
4632
4598
  .Layer__P,
4633
4599
  .Layer__Span {
4634
- max-inline-size: min(80ch, 60rem);
4635
4600
  margin: 0;
4636
4601
  font-size: var(--text-md);
4637
4602
  line-height: 140%;
@@ -4681,6 +4646,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
4681
4646
  .Layer__Span[data-no-wrap] {
4682
4647
  white-space: nowrap;
4683
4648
  }
4649
+ .Layer__Header[data-numeric=tabular-nums],
4650
+ .Layer__Label[data-numeric=tabular-nums],
4651
+ .Layer__P[data-numeric=tabular-nums],
4652
+ .Layer__Span[data-numeric=tabular-nums] {
4653
+ font-variant-numeric: tabular-nums;
4654
+ }
4684
4655
  .Layer__Header[data-ellipsis], .Layer__Header[data-with-tooltip],
4685
4656
  .Layer__Label[data-ellipsis],
4686
4657
  .Layer__Label[data-with-tooltip],
@@ -4969,6 +4940,18 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
4969
4940
  * A `label` is an inline element by default. This change allows us to apply padding.
4970
4941
  */
4971
4942
  display: inline-block;
4943
+ }
4944
+
4945
+ .Layer__Span[data-ellipsis],
4946
+ .Layer__Span[data-with-tooltip] {
4947
+ /*
4948
+ * `Span` is `display: inline` by default, which ignores `overflow` and `text-overflow`
4949
+ * — so ellipsis silently does nothing. Promote to `inline-block` so the rules above
4950
+ * actually apply, and pin `vertical-align` so the new baseline doesn't shift the span
4951
+ * relative to neighbouring inline content.
4952
+ */
4953
+ display: inline-block;
4954
+ vertical-align: middle;
4972
4955
  }.Layer__UI__ToggleOption {
4973
4956
  box-sizing: border-box;
4974
4957
  position: relative;
@@ -5563,7 +5546,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
5563
5546
  border-color: var(--outline-active);
5564
5547
  }
5565
5548
  .Layer__ComboBoxControl--disabled {
5549
+ background-color: var(--color-base-100);
5566
5550
  cursor: not-allowed;
5551
+ color: var(--color-base-800);
5567
5552
  }
5568
5553
  .Layer__ComboBoxControl--readonly {
5569
5554
  background-color: var(--bg-muted);
@@ -6484,9 +6469,23 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6484
6469
  .Layer__UI__Table-TableHeader > tr {
6485
6470
  height: inherit;
6486
6471
  }
6472
+ .Layer__UI__Table-TableHeader .Layer__UI__Table-Row {
6473
+ background-color: var(--color-base-0);
6474
+ }
6475
+ @media (width <= 500px) {
6476
+ .Layer__UI__Table-TableHeader {
6477
+ height: auto;
6478
+ }
6479
+ }
6487
6480
 
6488
6481
  .Layer__UI__Table-Row {
6489
6482
  height: 3.25rem;
6483
+ background-color: var(--color-base-200);
6484
+ }
6485
+ @media (width <= 500px) {
6486
+ .Layer__UI__Table-Row {
6487
+ height: auto;
6488
+ }
6490
6489
  }
6491
6490
  .Layer__UI__Table-Row:not(:last-child) .Layer__UI__Table-Cell {
6492
6491
  border-bottom: 1px solid var(--color-base-300);
@@ -6559,16 +6558,15 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
6559
6558
  .Layer__UI__Table-Column[data-pinned],
6560
6559
  .Layer__UI__Table-Cell[data-pinned] {
6561
6560
  z-index: 1;
6562
- background-color: inherit;
6563
6561
  }
6564
6562
 
6565
6563
  .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Column[data-pinned=left],
6566
6564
  .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Cell[data-pinned=left] {
6567
- border-right: 1px solid var(--color-base-200);
6565
+ border-right: 1px solid var(--color-base-300);
6568
6566
  }
6569
6567
  .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Column[data-pinned=right],
6570
6568
  .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Cell[data-pinned=right] {
6571
- border-left: 1px solid var(--color-base-200);
6569
+ border-left: 1px solid var(--color-base-300);
6572
6570
  }
6573
6571
 
6574
6572
  .Layer__UI__Table-TableHeader .Layer__UI__Table-Column[data-pinned] {
@@ -7365,17 +7363,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
7365
7363
  gap: var(--spacing-xs);
7366
7364
  width: 100%;
7367
7365
  }
7368
- .Layer__expanded-bank-transaction-row__table-cell--split-entry {
7369
- width: 100%;
7370
- }
7371
7366
  .Layer__expanded-bank-transaction-row__table-cell--split-entry input {
7372
7367
  width: 100%;
7373
7368
  }
7374
- .Layer__expanded-bank-transaction-row__table-cell--split-entry .Layer__input-tooltip {
7375
- position: relative;
7376
- flex: 1;
7377
- max-width: 42%;
7378
- }
7379
7369
  .Layer__expanded-bank-transaction-row__total-and-btns {
7380
7370
  box-sizing: border-box;
7381
7371
  flex-direction: row;
@@ -8087,6 +8077,39 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
8087
8077
  }
8088
8078
  .Layer__ProfitAndLossReport__Modal--mobile .Layer__ProfitAndLossDetailReport {
8089
8079
  min-height: 0;
8080
+ }.Layer__ProfitAndLossDetailedChartsHeader {
8081
+ display: flex;
8082
+ align-items: flex-start;
8083
+ justify-content: space-between;
8084
+ padding: var(--spacing-lg);
8085
+ box-shadow: 0 -1px 0 0 var(--color-base-300) inset;
8086
+ }
8087
+ .Layer__ProfitAndLossDetailedChartsHeader button.Layer__btn.Layer__btn--icon-only {
8088
+ block-size: 2rem;
8089
+ min-block-size: 2rem;
8090
+ inline-size: 2rem;
8091
+ padding: 0;
8092
+ }
8093
+
8094
+ .Layer__ProfitAndLossDetailedChartsHeader--tablet {
8095
+ gap: var(--spacing-md);
8096
+ align-items: center;
8097
+ justify-content: flex-start;
8098
+ }
8099
+
8100
+ .Layer__ProfitAndLossDetailedChartsHeader__head {
8101
+ display: flex;
8102
+ flex-direction: column;
8103
+ gap: var(--spacing-4xs);
8104
+ }
8105
+ .Layer__ProfitAndLossDetailedChartsHeader__head > .Layer__text {
8106
+ margin: 0;
8107
+ }
8108
+
8109
+ @container (max-width: 767px) {
8110
+ .Layer__ProfitAndLossDetailedChartsHeader--desktop .Layer__ProfitAndLossDetailedChartsHeader__date {
8111
+ display: none;
8112
+ }
8090
8113
  }.Layer__GlobalDateRangeSelection {
8091
8114
  display: grid;
8092
8115
  grid-template-columns: repeat(3, minmax(10rem, 1fr));
@@ -9248,6 +9271,18 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9248
9271
  --banner-icon-color: var(--color-info-success-fg);
9249
9272
  --banner-icon-bg: var(--color-info-success-bg);
9250
9273
  }
9274
+ @media (width <= 500px) {
9275
+ .Layer__UI__Banner.Layer__Stack {
9276
+ flex-direction: column;
9277
+ align-items: stretch;
9278
+ }
9279
+ .Layer__UI__Banner.Layer__Stack .Layer__UI__Banner__actions {
9280
+ width: 100%;
9281
+ }
9282
+ .Layer__UI__Banner.Layer__Stack .Layer__UI__Banner__actions .Layer__UI__Button {
9283
+ inline-size: 100%;
9284
+ }
9285
+ }
9251
9286
 
9252
9287
  .Layer__UI__Banner__iconContainer {
9253
9288
  flex-shrink: 0;
@@ -9361,6 +9396,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9361
9396
  .Layer__UI__Table__UnifiedReports .Layer__UI__Table-Cell {
9362
9397
  display: table-cell;
9363
9398
  min-width: 6rem;
9399
+ max-width: 16rem;
9364
9400
  }.Layer__YearPicker {
9365
9401
  inline-size: 8rem;
9366
9402
  }.Layer__UnifiedReports__AdditionalControls {
@@ -9581,8 +9617,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9581
9617
 
9582
9618
  .Layer__MileageTrackingStats__Card {
9583
9619
  box-sizing: border-box;
9584
- padding-block: var(--spacing-sm);
9585
- padding-inline: var(--spacing-md);
9586
9620
  border-radius: var(--border-radius-2xs);
9587
9621
  border: 1px solid var(--border-color);
9588
9622
  }.Layer__TripsMobileHeader__SearchField {
@@ -9674,6 +9708,311 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9674
9708
  }
9675
9709
  .Layer__project-view .Layer__select__menu {
9676
9710
  z-index: 2;
9711
+ }.Layer__SummaryCard {
9712
+ --layer-summary-card-desktop-height: 25rem;
9713
+ box-sizing: border-box;
9714
+ inline-size: 100%;
9715
+ min-inline-size: 0;
9716
+ box-shadow: 0 0 0 1px var(--border-color);
9717
+ }
9718
+ .Layer__SummaryCard__Body {
9719
+ block-size: 100%;
9720
+ min-inline-size: 0;
9721
+ }
9722
+ .Layer__SummaryCard__Header {
9723
+ box-sizing: border-box;
9724
+ block-size: 5rem;
9725
+ border-block-end: 1px solid var(--color-base-300);
9726
+ }
9727
+ .Layer__SummaryCard__HeaderTitle {
9728
+ min-inline-size: 0;
9729
+ }
9730
+ .Layer__SummaryCard__HeaderActions {
9731
+ flex-shrink: 0;
9732
+ min-inline-size: 0;
9733
+ }
9734
+ .Layer__SummaryCard__HeaderLegend {
9735
+ min-inline-size: 0;
9736
+ }
9737
+ .Layer__SummaryCard__HeaderPrimaryAction {
9738
+ flex-shrink: 0;
9739
+ min-inline-size: 0;
9740
+ }
9741
+ .Layer__SummaryCard__Content {
9742
+ box-sizing: border-box;
9743
+ flex: 1 1 auto;
9744
+ min-block-size: 0;
9745
+ min-inline-size: 0;
9746
+ padding: var(--spacing-sm);
9747
+ }
9748
+
9749
+ @media (width > 760px) {
9750
+ .Layer__SummaryCard {
9751
+ block-size: var(--layer-summary-card-desktop-height);
9752
+ }
9753
+ .Layer__SummaryCard__Content {
9754
+ overflow: auto;
9755
+ }
9756
+ }.Layer__ExpensesSummaryCard .Layer__SummaryCard__Content {
9757
+ overflow: hidden;
9758
+ block-size: 100%;
9759
+ }
9760
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts,
9761
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content {
9762
+ gap: var(--spacing-md);
9763
+ block-size: 100%;
9764
+ min-block-size: 0;
9765
+ }
9766
+ @container (width > 500px) {
9767
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts,
9768
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content {
9769
+ flex-direction: row;
9770
+ }
9771
+ }
9772
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content {
9773
+ display: flex;
9774
+ align-items: stretch;
9775
+ justify-content: center;
9776
+ overflow: hidden;
9777
+ }
9778
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content > .Layer__DetailedChart {
9779
+ flex: 0 0 auto;
9780
+ inline-size: auto;
9781
+ min-inline-size: 14rem;
9782
+ max-inline-size: 18rem;
9783
+ }
9784
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content > .Layer__DetailedTable {
9785
+ flex: unset;
9786
+ overflow-x: hidden;
9787
+ overflow-y: auto;
9788
+ min-block-size: 0;
9789
+ min-inline-size: 0;
9790
+ }
9791
+ @media (width <= 767px) {
9792
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts__content > .Layer__DetailedTable {
9793
+ padding-inline: 0;
9794
+ }
9795
+ }
9796
+ .Layer__ExpensesSummaryCard .Layer__DetailedTable table {
9797
+ border-collapse: separate;
9798
+ border-spacing: 0;
9799
+ }
9800
+ .Layer__ExpensesSummaryCard .Layer__DetailedTable thead th {
9801
+ position: sticky;
9802
+ z-index: 1;
9803
+ box-shadow: inset 0 -1px 0 var(--color-base-300);
9804
+ background: var(--color-base-0);
9805
+ inset-block-start: 0;
9806
+ border-block-end: 0;
9807
+ }
9808
+ .Layer__ExpensesSummaryCard .Layer__profit-and-loss-detailed-charts .Layer__DetailedChart__container {
9809
+ padding-inline-start: var(--spacing-xs);
9810
+ padding-inline-end: var(--spacing-xs);
9811
+ }
9812
+ .Layer__ExpensesSummaryCard .Layer__DetailedTable {
9813
+ min-inline-size: 10rem;
9814
+ }
9815
+ .Layer__ExpensesSummaryCard .Layer__DetailedTable__container {
9816
+ padding-inline: 0;
9817
+ }.Layer__MileageTrackingSummary__Header {
9818
+ box-sizing: border-box;
9819
+ padding: var(--spacing-lg);
9820
+ border-bottom: 1px solid var(--color-base-300);
9821
+ }
9822
+
9823
+ .Layer__MileageTrackingSummary__Content {
9824
+ padding: var(--spacing-lg);
9825
+ }
9826
+
9827
+ .Layer__MileageTrackingSummary__Cards {
9828
+ min-width: 12rem;
9829
+ }
9830
+
9831
+ @media (width <= 760px) {
9832
+ .Layer__MileageTrackingSummary__Cards {
9833
+ min-width: 0;
9834
+ }
9835
+ .Layer__MileageTrackingSummary__Cards .Layer__MileageTrackingSummary__StatCardSlot {
9836
+ display: flex;
9837
+ flex: 1;
9838
+ }
9839
+ .Layer__MileageTrackingSummary__Cards .Layer__MileageTrackingSummary__StatCardSlot > * {
9840
+ flex: 1;
9841
+ }
9842
+ }.Layer__PnlLegend__Swatch {
9843
+ display: inline-block;
9844
+ flex-shrink: 0;
9845
+ block-size: 0.625rem;
9846
+ inline-size: 0.625rem;
9847
+ border-radius: 50%;
9848
+ }
9849
+
9850
+ .Layer__PnlLegend__Swatch--income {
9851
+ background-color: var(--bar-color-income);
9852
+ }
9853
+
9854
+ .Layer__PnlLegend__Swatch--expenses {
9855
+ background-color: var(--bar-color-expenses);
9856
+ }
9857
+
9858
+ .Layer__PnlLegend__Swatch--uncategorized {
9859
+ background-image: linear-gradient(45deg, var(--color-base-500) 25%, transparent 25%, transparent 50%, var(--color-base-500) 50%, var(--color-base-500) 75%, transparent 75%, transparent);
9860
+ background-size: 4px 4px;
9861
+ }.Layer__ProfitAndLossSummaryCard .Layer__chart-wrapper,
9862
+ .Layer__ProfitAndLossSummaryCard .Layer__chart-container {
9863
+ min-block-size: 15.625rem;
9864
+ }
9865
+ .Layer__ProfitAndLossSummaryCard div.recharts-responsive-container.Layer__chart-container {
9866
+ padding-block-start: var(--spacing-xs);
9867
+ }.Layer__Swatch {
9868
+ flex-shrink: 0;
9869
+ block-size: 0.625rem;
9870
+ inline-size: 0.625rem;
9871
+ }.Layer__UI__Legend--table {
9872
+ flex-wrap: wrap;
9873
+ }
9874
+
9875
+ .Layer__UI__Legend__Item {
9876
+ min-inline-size: 10rem;
9877
+ max-inline-size: 10rem;
9878
+ }
9879
+
9880
+ .Layer__UI__Legend__Label {
9881
+ min-inline-size: 0;
9882
+ }
9883
+ .Layer__UI__Legend__Label > .Layer__Span {
9884
+ min-inline-size: 0;
9885
+ }
9886
+
9887
+ .Layer__UI__Legend--aligned {
9888
+ display: flex;
9889
+ flex-direction: row;
9890
+ align-items: flex-start;
9891
+ inline-size: 100%;
9892
+ min-inline-size: 0;
9893
+ }
9894
+
9895
+ .Layer__UI__Legend__AlignedItem {
9896
+ gap: var(--spacing-3xs);
9897
+ min-inline-size: 0;
9898
+ padding-inline-end: var(--spacing-md);
9899
+ }
9900
+
9901
+ .Layer__UI__Legend__AlignedValue {
9902
+ line-height: 1.1;
9903
+ }.Layer__HorizontalBarChart {
9904
+ container: horizontal-bar-chart/inline-size;
9905
+ inline-size: 100%;
9906
+ }
9907
+
9908
+ .Layer__HorizontalBarChart__Bar {
9909
+ block-size: 1.5rem;
9910
+ inline-size: 100%;
9911
+ }
9912
+ .Layer__HorizontalBarChart__Bar .recharts-responsive-container {
9913
+ padding: 0;
9914
+ }
9915
+
9916
+ @container horizontal-bar-chart (max-width: 1100px) {
9917
+ .Layer__HorizontalBarChart .Layer__UI__Legend--table.Layer__Stack[data-direction] {
9918
+ flex-direction: column;
9919
+ gap: var(--spacing-sm);
9920
+ align-items: stretch;
9921
+ }
9922
+ .Layer__HorizontalBarChart .Layer__UI__Legend__Item {
9923
+ display: grid;
9924
+ grid-template-columns: minmax(0, 1fr) auto;
9925
+ row-gap: 0;
9926
+ column-gap: var(--spacing-sm);
9927
+ align-items: center;
9928
+ min-inline-size: 100%;
9929
+ max-inline-size: none;
9930
+ }
9931
+ .Layer__HorizontalBarChart .Layer__UI__Legend__Label {
9932
+ min-inline-size: 0;
9933
+ }
9934
+ .Layer__HorizontalBarChart .Layer__UI__Legend__Meta {
9935
+ justify-self: end;
9936
+ }
9937
+ .Layer__HorizontalBarChart .Layer__UI__Legend__Value,
9938
+ .Layer__HorizontalBarChart .Layer__UI__Legend__Percentage {
9939
+ white-space: nowrap;
9940
+ }
9941
+ }.Layer__SummaryCard__ContainerHeader {
9942
+ box-sizing: border-box;
9943
+ border-bottom: 1px solid var(--color-base-300);
9944
+ }
9945
+
9946
+ .Layer__TaxEstimatesSummaryCard__Container {
9947
+ container-type: inline-size;
9948
+ min-width: 0;
9949
+ }
9950
+
9951
+ .Layer__TaxEstimatesSummaryCard:not(.Layer__TaxEstimatesSummaryCard--summaryCard) .Layer__TaxEstimatesSummaryCard__Header.Layer__SummaryCard__ContainerHeader {
9952
+ padding-block-end: var(--spacing-lg);
9953
+ padding-inline: var(--spacing-lg);
9954
+ margin-inline: calc(-1 * var(--spacing-lg));
9955
+ }
9956
+
9957
+ .Layer__TaxEstimatesSummaryCard {
9958
+ min-width: 0;
9959
+ }
9960
+ .Layer__TaxEstimatesSummaryCard .Layer__DetailedChart {
9961
+ height: 12rem;
9962
+ max-width: 18rem;
9963
+ }
9964
+ @media (width >= 760px) {
9965
+ .Layer__TaxEstimatesSummaryCard .Layer__DetailedChart {
9966
+ width: 18rem;
9967
+ }
9968
+ }
9969
+ .Layer__TaxEstimatesSummaryCard.Layer__card {
9970
+ gap: var(--spacing-lg);
9971
+ padding: var(--spacing-lg);
9972
+ border: 1px solid var(--color-base-200);
9973
+ box-shadow: none;
9974
+ }
9975
+ .Layer__TaxEstimatesSummaryCard__Content {
9976
+ justify-content: space-between;
9977
+ min-width: 0;
9978
+ }
9979
+ .Layer__TaxEstimatesSummaryCard__Content--mobile {
9980
+ align-items: center;
9981
+ }
9982
+ .Layer__TaxEstimatesSummaryCard__Content--horizontal {
9983
+ align-items: stretch;
9984
+ }
9985
+ .Layer__TaxEstimatesSummaryCard__TotalRow {
9986
+ inline-size: 100%;
9987
+ }
9988
+ .Layer__TaxEstimatesSummaryCard__TotalValue {
9989
+ line-height: 1.1;
9990
+ }
9991
+ .Layer__TaxEstimatesSummaryCard__Header, .Layer__TaxEstimatesSummaryCard__Body {
9992
+ min-width: 0;
9993
+ }
9994
+ .Layer__TaxEstimatesSummaryCard--summaryCard.Layer__card {
9995
+ gap: 0;
9996
+ width: auto;
9997
+ max-width: 100%;
9998
+ padding: 0;
9999
+ }
10000
+ .Layer__TaxEstimatesSummaryCard--summaryCard .Layer__TaxEstimatesSummaryCard__Header {
10001
+ padding: var(--spacing-lg);
10002
+ }
10003
+ .Layer__TaxEstimatesSummaryCard--summaryCard .Layer__TaxEstimatesSummaryCard__Content {
10004
+ align-items: center;
10005
+ }.Layer__SolopreneurOverview__Grid {
10006
+ display: grid;
10007
+ grid-template-columns: repeat(2, minmax(0, 1fr));
10008
+ grid-auto-rows: minmax(0, auto);
10009
+ gap: var(--spacing-md);
10010
+ max-inline-size: 1406px;
10011
+ }
10012
+ @container (max-width: 1023px) {
10013
+ .Layer__SolopreneurOverview__Grid {
10014
+ grid-template-columns: minmax(0, 1fr);
10015
+ }
9677
10016
  }.Layer__FilingStatusComboBox {
9678
10017
  display: grid;
9679
10018
  grid-template-areas: "label" "input";
@@ -9721,8 +10060,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9721
10060
  }
9722
10061
  }
9723
10062
 
9724
- .Layer__TaxSummaryCard__MobileToggleWrapper {
9725
- margin-top: var(--spacing-md);
10063
+ .Layer__TaxSummaryCard__MobileAmountRow .Layer__UI__Button {
10064
+ text-decoration: underline;
9726
10065
  }.Layer__TaxSummaryCard {
9727
10066
  display: grid;
9728
10067
  grid-template-columns: 20% 40% 40%;
@@ -9814,6 +10153,13 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9814
10153
  justify-content: flex-end;
9815
10154
  text-align: right;
9816
10155
  }
10156
+ .Layer__UI__Table__TaxDetails .Layer__UI__Table-Row:has(.Layer__TaxDetails__TaxDetailsRow--total) .Layer__Span {
10157
+ font-weight: var(--font-weight-bold);
10158
+ color: var(--color-base-1000);
10159
+ }
10160
+ .Layer__UI__Table__TaxDetails .Layer__UI__Table-Row:has(.Layer__TaxDetails__TaxDetailsRow--total):not([data-depth="0"]) {
10161
+ border-block-start-color: var(--color-base-500);
10162
+ }
9817
10163
 
9818
10164
  .Layer__TaxDetails__ExpandableCardsWrapper {
9819
10165
  overflow: hidden;
@@ -9827,254 +10173,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
9827
10173
  .Layer__TaxDetails__ExpandableCardsWrapper {
9828
10174
  border-radius: 0;
9829
10175
  }
9830
- }.Layer__TaxDetails__Operator {
9831
- display: inline-flex;
9832
- align-items: center;
9833
- align-self: stretch;
9834
- padding-inline-end: var(--spacing-md);
9835
- border-inline-end: 1px solid var(--color-base-500);
9836
- }.Layer__SummaryCard__ContainerHeader {
9837
- box-sizing: border-box;
9838
- border-bottom: 1px solid var(--color-base-300);
9839
- }
9840
-
9841
- .Layer__TaxEstimatesSummaryCard__Container {
9842
- container-type: inline-size;
9843
- min-width: 0;
9844
- }
9845
-
9846
- .Layer__TaxEstimatesSummaryCard {
9847
- min-width: 0;
9848
- }
9849
- .Layer__TaxEstimatesSummaryCard .Layer__DetailedChart {
9850
- height: 12rem;
9851
- max-width: 18rem;
9852
- }
9853
- @media (width >= 760px) {
9854
- .Layer__TaxEstimatesSummaryCard .Layer__DetailedChart {
9855
- width: 18rem;
9856
- }
9857
- }
9858
- .Layer__TaxEstimatesSummaryCard.Layer__card {
9859
- gap: var(--spacing-lg);
9860
- padding: var(--spacing-lg);
9861
- border: 1px solid var(--color-base-200);
9862
- box-shadow: none;
9863
- }
9864
- .Layer__TaxEstimatesSummaryCard__Content {
9865
- justify-content: space-between;
9866
- min-width: 0;
9867
- }
9868
- .Layer__TaxEstimatesSummaryCard__Content--mobile {
9869
- align-items: center;
9870
- }
9871
- .Layer__TaxEstimatesSummaryCard__Header, .Layer__TaxEstimatesSummaryCard__Body {
9872
- min-width: 0;
9873
- }
9874
- .Layer__TaxEstimatesSummaryCard--summaryCard.Layer__card {
9875
- gap: 0;
9876
- width: auto;
9877
- max-width: 100%;
9878
- padding: 0;
9879
- }
9880
- .Layer__TaxEstimatesSummaryCard--summaryCard .Layer__TaxEstimatesSummaryCard__Header {
9881
- padding: var(--spacing-lg);
9882
- }
9883
- .Layer__TaxEstimatesSummaryCard--summaryCard .Layer__TaxEstimatesSummaryCard__Content {
9884
- align-items: center;
9885
- }.Layer__MetricRow {
9886
- min-block-size: 2.5rem;
9887
- }
9888
-
9889
- .Layer__MetricCard {
9890
- min-width: 0;
9891
- padding: var(--spacing-sm) var(--spacing-md);
9892
- border-radius: var(--border-radius-xs);
9893
- background-color: var(--color-base-50);
9894
- }
9895
-
9896
- .Layer__MetricCard__Label {
9897
- flex-shrink: 0;
9898
- white-space: nowrap;
9899
- }
9900
-
9901
- .Layer__MetricCard__Meter {
9902
- flex: 1;
9903
- min-width: 0;
9904
- }
9905
-
9906
- .Layer__MetricRow__Value {
9907
- flex: 0 0 56%;
9908
- justify-content: flex-end;
9909
- min-width: 0;
9910
- }
9911
-
9912
- .Layer__MetricCard .Layer__MoneySpan {
9913
- flex-shrink: 0;
9914
- }
9915
-
9916
- @container (max-width: 720px) {
9917
- .Layer__MetricRow,
9918
- .Layer__MetricRow__Value {
9919
- flex-direction: column;
9920
- align-items: stretch;
9921
- }
9922
- .Layer__MetricRow__Value {
9923
- flex-basis: auto;
9924
- }
9925
- }.Layer__TaxOverview__Card {
9926
- --color-tax-overview-income-meter-fill: #6d3cc8;
9927
- --color-tax-overview-deductions-meter-fill: #1c7e9a;
9928
- --color-tax-overview-taxable-income-meter-fill: #3b9c63;
9929
- --color-tax-overview-unknown-meter-fill: var(--color-base-500);
9930
- gap: var(--spacing-lg);
9931
- padding: var(--spacing-lg);
9932
- }
9933
- .Layer__TaxOverview__Card .Layer__card {
9934
- border: 1px solid var(--color-base-200);
9935
- box-shadow: none;
9936
- }
9937
-
9938
- .Layer__TaxOverview__Meter {
9939
- flex: 1;
9940
- min-width: 9rem;
9941
- }
9942
-
9943
- .Layer__TaxOverview__Meter__track {
9944
- fill: var(--color-base-100);
9945
- }
9946
-
9947
- .Layer__TaxOverview__IncomeMeter.Layer__TaxOverview__Meter__fill {
9948
- fill: var(--color-tax-overview-income-meter-fill);
9949
- }
9950
-
9951
- .Layer__TaxOverview__DeductionsMeter.Layer__TaxOverview__Meter__fill {
9952
- fill: var(--color-tax-overview-deductions-meter-fill);
9953
- }
9954
-
9955
- .Layer__TaxOverview__TaxableIncomeMeter.Layer__TaxOverview__Meter__fill {
9956
- fill: var(--color-tax-overview-taxable-income-meter-fill);
9957
- }
9958
-
9959
- .Layer__TaxOverview__UnknownMetricMeter.Layer__TaxOverview__Meter__fill {
9960
- fill: var(--color-tax-overview-unknown-meter-fill);
9961
- }
9962
-
9963
- @container (max-width: 720px) {
9964
- .Layer__TaxOverview__Card {
9965
- gap: var(--spacing-md);
9966
- padding: 0;
9967
- }
9968
- }
9969
- .Layer__TaxOverview__Card__MetricRow--mobile {
9970
- gap: var(--spacing-sm);
9971
- }
9972
-
9973
- .Layer__MetricCard .Layer__TaxOverview__Meter {
9974
- width: 100%;
9975
- min-width: 0;
9976
- }.Layer__TaxOverview__DeadlineCard {
9977
- box-sizing: border-box;
9978
- min-width: 0;
9979
- padding: 0;
9980
- border-radius: var(--border-radius-xs);
9981
- border: 1px solid var(--color-base-200);
9982
- background-color: var(--color-base-0);
9983
- }
9984
- .Layer__TaxOverview__DeadlineReviewRow {
9985
- background-color: var(--color-base-50);
9986
- }
9987
- .Layer__TaxOverview__DeadlineContent {
9988
- min-width: 0;
9989
- }
9990
- .Layer__TaxOverview__DeadlineAmountColumn {
9991
- flex-shrink: 0;
9992
- min-width: 10rem;
9993
- }
9994
- .Layer__TaxOverview__DeadlineValueRow {
9995
- justify-content: flex-end;
9996
- }
9997
- .Layer__TaxOverview__AmountIcon {
9998
- display: inline-flex;
9999
- align-items: center;
10000
- justify-content: center;
10001
- height: 1.25rem;
10002
- width: 1.25rem;
10003
- border-radius: 50%;
10004
- background-color: var(--color-info-neutral-bg);
10005
- color: var(--color-info-neutral-fg);
10006
- }
10007
- .Layer__TaxOverview__AmountIcon--warning {
10008
- background-color: var(--color-info-warning-bg);
10009
- color: var(--color-info-warning-fg);
10010
- }
10011
- .Layer__TaxOverview__AmountIcon--pastDue {
10012
- background-color: var(--color-info-error-bg);
10013
- color: var(--color-info-error);
10014
- }
10015
- .Layer__TaxOverview__AmountIcon--paid {
10016
- background-color: var(--color-info-success-bg);
10017
- color: var(--color-info-success);
10018
- }
10019
- .Layer__TaxOverview__AmountIcon--due {
10020
- background-color: var(--color-info-bg);
10021
- color: var(--color-info);
10022
- }
10023
- .Layer__TaxOverview__DeadlineReviewContent {
10024
- min-width: 0;
10025
- }
10026
- .Layer__TaxOverview__DeadlineReviewIcon {
10027
- display: inline-flex;
10028
- align-items: center;
10029
- justify-content: center;
10030
- color: var(--color-info-warning);
10031
- }
10032
- .Layer__TaxOverview__DeadlineReviewLabel {
10033
- color: var(--color-info-warning-fg);
10034
- }
10035
-
10036
- @media (width <= 500px) {
10037
- .Layer__TaxOverview__DeadlineReviewRow button {
10038
- width: fit-content;
10039
- }
10040
- }.Layer__TaxOverview__Card--deadlines {
10041
- min-width: 25rem;
10042
- }
10043
- @container (max-width: 960px) {
10044
- .Layer__TaxOverview__Card--deadlines {
10045
- min-width: unset;
10046
- }
10047
- }
10048
- .Layer__TaxOverview__Card.Layer__card {
10049
- gap: var(--spacing-lg);
10050
- padding: var(--spacing-lg);
10051
- border: 1px solid var(--color-base-200);
10052
- box-shadow: none;
10053
- }
10054
-
10055
- @container (max-width: 720px) {
10056
- .Layer__TaxOverview__Card.Layer__card {
10057
- gap: var(--spacing-md);
10058
- }
10059
- }.Layer__TaxOverview {
10060
- inline-size: min(100%, 1406px);
10061
- container-type: inline-size;
10062
- }
10063
- .Layer__TaxOverview__PrimaryColumn {
10064
- flex: 1 1 0%;
10065
- min-width: 0;
10066
- }
10067
- .Layer__TaxOverview__SecondaryColumn {
10068
- flex: 0 0 38%;
10069
- min-width: 23rem;
10070
- max-width: 32rem;
10071
- }
10072
-
10073
- @container (max-width: 1140px) {
10074
- .Layer__TaxOverview__SecondaryColumn {
10075
- flex-basis: 36%;
10076
- min-width: 22rem;
10077
- }
10078
10176
  }.Layer__TaxPaymentsMobileList .Layer__TaxPayments__ErrorState,
10079
10177
  .Layer__TaxPaymentsMobileList .Layer__TaxPayments__EmptyState {
10080
10178
  padding: var(--spacing-sm);
@@ -10282,7 +10380,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10282
10380
  font-size: 1.75rem;
10283
10381
  line-height: 1;
10284
10382
  color: var(--color-base-0);
10285
- font-variant-numeric: tabular-nums;
10286
10383
  letter-spacing: 0.02em;
10287
10384
  }
10288
10385
 
@@ -10301,7 +10398,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10301
10398
 
10302
10399
  .Layer__ActiveTimeTracker__DurationValue {
10303
10400
  font-size: var(--text-heading-3xl);
10304
- font-variant-numeric: tabular-nums;
10305
10401
  line-height: 1;
10306
10402
  }
10307
10403
 
@@ -10527,7 +10623,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10527
10623
 
10528
10624
  .Layer__TimeTrackingStats__SummaryValue {
10529
10625
  font-size: var(--text-heading);
10530
- font-variant-numeric: tabular-nums;
10531
10626
  line-height: 1;
10532
10627
  }
10533
10628