/* THE PROPERTIES PANEL, 20% SMALLER INSIDE. 16 October 2026.
 *
 * Asked for by Mounir: "i want the controls inside this Properties panel made 20% smaller while
 * the panel itself stays the same width, and it will increase spacing between fields and buttons
 * proportionally".
 *
 * HOW: everything inside the panel is drawn at 80% (zoom), so every field, button, icon and word
 * keeps its proportions exactly. The panel itself is not touched, so it stays the same width.
 * The width that frees up goes to the spaces: the panel's side margins and the gap between two
 * fields are made equal (about 32px each on the usual panel), and a row of buttons spreads out
 * across the same width. The space between rows stays the size it was on screen, so it grows
 * compared with the smaller controls.
 *
 * THE ARITHMETIC. Inside the zoom, 1px draws as 0.8px. The panel's content used to be laid out
 * at its own width; here it is laid out 44px narrower (side margins 39.5px instead of 17.5px), so
 * "the width things used to be laid out at" is (100% + 44px) × 0.8, and every field is given
 * exactly the width it had then. Written with percentages rather than container units, so it
 * holds at any panel width.
 *
 * IN ITS OWN FILE, per the Editor Code Restructure. Remove the link to it and the panel is back
 * as it was.
 */
#props{ zoom:.8; padding:15px 39.5px; }

/* the space between rows and above labels: the same on screen as before */
#props .field{ margin-bottom:20px; }
#props .field > label{ margin-bottom:5px; }
#props .sep-top{ padding-top:17.5px; padding-bottom:17.5px; }

/* two fields side by side: each as wide as before (in proportion), the rest goes between them */
#props > .row2{ justify-content:space-between; }
#props > .row2 > *{ flex:0 0 calc((100% + 44px) * .4 - 5px); min-width:0; }
#props > .row2.cf-pair > .field:first-child{ flex:0 0 calc((100% + 44px) * .8 - 114px); }
#props > .row2.cf-pair > .field:last-child{ flex:0 0 104px; }
#props > .field > .font-row{ grid-template-columns:repeat(2, calc((100% + 44px) * .4 - 5px)); justify-content:space-between; }
#props > .field > .ts-row{ justify-content:space-between; }
#props > .field > .ts-row > select{ flex:0 0 calc((100% + 44px) * .8 - 102px); }

/* a row of buttons across the panel: each as wide as before, spread evenly */
#props > .field > .al-row:not(.fit-row){ justify-content:space-between; }
#props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(2), #props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(2) ~ *{ flex:0 0 calc(((100% + 44px) * .8 - 10px) / 2); }
#props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(3), #props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(3) ~ *{ flex:0 0 calc(((100% + 44px) * .8 - 20px) / 3); }
#props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(4), #props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(4) ~ *{ flex:0 0 calc(((100% + 44px) * .8 - 30px) / 4); }
#props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(5), #props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(5) ~ *{ flex:0 0 calc(((100% + 44px) * .8 - 40px) / 5); }
#props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(6), #props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(6) ~ *{ flex:0 0 calc(((100% + 44px) * .8 - 50px) / 6); }
#props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(7), #props > .field > .al-row:not(.fit-row) > :first-child:nth-last-child(7) ~ *{ flex:0 0 calc(((100% + 44px) * .8 - 60px) / 7); }