/* GENERATED by tools\forge-app.cs from forge-template.json - Phoenix (Clay), Comfortable, 1 page as cards. Do not edit. */
:root { --accent: #c15f3c; --accent-strong: #9c4a2d; --nav: #3b2219; --nav-hover: #5a3426; --soft: #fdf1ea; --on: #f6d2be; --band: #fbe5d8;
        --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 22%, transparent); --user-bg: color-mix(in srgb, var(--nav) 82%, white); --chip: var(--soft); }
/* the world's own accent #2E5E4E, from its database: the colours follow it */
:root { --accent: #2E5E4E; --accent-strong: color-mix(in srgb, #2E5E4E 78%, black); --nav: color-mix(in srgb, #2E5E4E 72%, black); --nav-hover: color-mix(in srgb, #2E5E4E 88%, black);
        --soft: color-mix(in srgb, #2E5E4E 7%, white); --on: color-mix(in srgb, #2E5E4E 20%, white); --band: color-mix(in srgb, #2E5E4E 13%, white);
        --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent); --accent-ring: color-mix(in srgb, var(--accent) 22%, transparent); --user-bg: color-mix(in srgb, var(--nav) 82%, white); --chip: var(--soft); }
/* Cards: a card per row of the same grid; the headers stay - a bar that sorts */
.forge-layout-Cards > .forge-tablecontrol { background: transparent; border: 0; padding: 0; overflow: visible; }
.forge-layout-Cards > .forge-tablecontrol > table { display: block; }
.forge-layout-Cards > .forge-tablecontrol > table > thead, .forge-layout-Cards > .forge-tablecontrol > table > thead > tr { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.forge-layout-Cards > .forge-tablecontrol > table > thead th { border: 0; padding: 1px 10px; background: var(--soft); border-radius: 12px; font-size: 12px; font-weight: 500; }
.forge-layout-Cards > .forge-tablecontrol > table > thead th.forge-open { display: none; }
.forge-layout-Cards > .forge-tablecontrol > table > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 8px 0; }
.forge-layout-Cards > .forge-tablecontrol > table > tbody > tr { display: flex; flex-direction: column; position: relative; min-width: 0; padding: 12px 40px 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.forge-layout-Cards > .forge-tablecontrol > table > tbody > tr:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }
/* QuickGrid keeps a page's height with empty rows - a card is a row with a key */
.forge-layout-Cards > .forge-tablecontrol > table > tbody > tr:not(:has([data-key])) { display: none; }
.forge-layout-Cards > .forge-tablecontrol > table > tbody > tr > td { display: block; max-width: none; padding: 1px 0; border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.forge-layout-Cards > .forge-tablecontrol > table > tbody > tr > td.forge-open { position: absolute; top: 8px; right: 8px; width: auto; }
.forge-layout-Cards > .forge-tablecontrol > table > tbody > tr > td::before { color: var(--muted); font-size: 12px; margin-right: 6px; }
.forge-layout-Cards[data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-BookID::before { content: "Book ID"; }
.forge-layout-Cards[data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-CopiesOut::before { content: "Copies Out"; }
.forge-layout-Cards[data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-Status::before { content: "Status"; }
.forge-layout-Cards[data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-LentTo::before { content: "Lent To"; }
.forge-layout-Cards[data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-LastMoved::before { content: "Last Moved"; }
.forge-layout-Cards[data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-Title { order: -1; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
/* a phone: every list as cards */
@media (max-width: 800px) {
/* Cards: a card per row of the same grid; the headers stay - a bar that sorts */
[data-layout] > .forge-tablecontrol { background: transparent; border: 0; padding: 0; overflow: visible; }
[data-layout] > .forge-tablecontrol > table { display: block; }
[data-layout] > .forge-tablecontrol > table > thead, [data-layout] > .forge-tablecontrol > table > thead > tr { display: flex; flex-wrap: wrap; gap: 2px 4px; }
[data-layout] > .forge-tablecontrol > table > thead th { border: 0; padding: 1px 10px; background: var(--soft); border-radius: 12px; font-size: 12px; font-weight: 500; }
[data-layout] > .forge-tablecontrol > table > thead th.forge-open { display: none; }
[data-layout] > .forge-tablecontrol > table > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 8px 0; }
[data-layout] > .forge-tablecontrol > table > tbody > tr { display: flex; flex-direction: column; position: relative; min-width: 0; padding: 12px 40px 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
[data-layout] > .forge-tablecontrol > table > tbody > tr:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }
/* QuickGrid keeps a page's height with empty rows - a card is a row with a key */
[data-layout] > .forge-tablecontrol > table > tbody > tr:not(:has([data-key])) { display: none; }
[data-layout] > .forge-tablecontrol > table > tbody > tr > td { display: block; max-width: none; padding: 1px 0; border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
[data-layout] > .forge-tablecontrol > table > tbody > tr > td.forge-open { position: absolute; top: 8px; right: 8px; width: auto; }
[data-layout] > .forge-tablecontrol > table > tbody > tr > td::before { color: var(--muted); font-size: 12px; margin-right: 6px; }
[data-layout][data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-BookID::before { content: "Book ID"; }
[data-layout][data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-CopiesOut::before { content: "Copies Out"; }
[data-layout][data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-Status::before { content: "Status"; }
[data-layout][data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-LentTo::before { content: "Lent To"; }
[data-layout][data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-LastMoved::before { content: "Last Moved"; }
[data-layout][data-table="Books"] > .forge-tablecontrol > table > tbody > tr > td.c-Title { order: -1; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
[data-layout][data-table="Loans"] > .forge-tablecontrol > table > tbody > tr > td.c-Line::before { content: "Line"; }
[data-layout][data-table="Loans"] > .forge-tablecontrol > table > tbody > tr > td.c-At::before { content: "At"; }
[data-layout][data-table="Loans"] > .forge-tablecontrol > table > tbody > tr > td.c-Act::before { content: "Act"; }
[data-layout][data-table="Loans"] > .forge-tablecontrol > table > tbody > tr > td.c-BookLabel::before { content: "Book"; }
[data-layout][data-table="Loans"] > .forge-tablecontrol > table > tbody > tr > td.c-MemberLabel::before { content: "Member"; }
[data-layout][data-table="Loans"] > .forge-tablecontrol > table > tbody > tr > td.c-ByWhom::before { content: "By Whom"; }
[data-layout][data-table="Loans"] > .forge-tablecontrol > table > tbody > tr > td.c-Reverses::before { content: "Reverses"; }
[data-layout][data-table="Loans"] > .forge-tablecontrol > table > tbody > tr > td.c-Why::before { content: "Why"; }
[data-layout][data-table="Loans"] > .forge-tablecontrol > table > tbody > tr > td.c-Standing { order: -1; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
[data-layout][data-table="Members"] > .forge-tablecontrol > table > tbody > tr > td.c-MemberID::before { content: "Member ID"; }
[data-layout][data-table="Members"] > .forge-tablecontrol > table > tbody > tr > td.c-BooksOut::before { content: "Books Out"; }
[data-layout][data-table="Members"] > .forge-tablecontrol > table > tbody > tr > td.c-Name { order: -1; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
[data-layout] > .forge-tablecontrol > table > thead { display: none; }
}