/* ============================================================
   ITI Lab Booking — Frontend
   ============================================================ */

/* Inside another site's theme (the ITI site: see it in http://itit-booking.local/larsys-preview/), the theme's general
   rules reach into the plugin: every element its own text size (1rem), every dropdown, field and text box a full-width
   block (max 300px) with a margin under it, text boxes 10 lines tall, headings in the page's colour, lists indented,
   15px under each heading. The site's font (Maison) is kept: the plugin looks like the rest of the site. These put back
   what the plugin is designed with. (Class-level: they beat the theme's bare "select", "textarea"…, while the plugin's
   own rules further down still decide; the theme's coloured headings and "h4 + *" need the id to be beaten.) */
/* (the theme gives every element "font-size: 1rem; line-height: 1.4": text without a size of its own inherits again) */
.itit-booking-app :where(*:not(h1, h2, h3, h4, h5, h6)) { font-size: inherit; line-height: inherit; }
.itit-booking-app select,
.itit-booking-app textarea,
.itit-booking-app input:not([type="checkbox"]):not([type="radio"]) { display: inline-block; max-width: none; min-height: 0; margin-bottom: 0; font-weight: inherit; }
.itit-booking-app select { width: auto; }
.itit-booking-app input[type="checkbox"], .itit-booking-app input[type="radio"] { width: auto; margin-bottom: 0; padding: 0; }
.itit-booking-app select:-moz-ui-invalid { box-shadow: none; }
.itit-booking-app :is(select, input, textarea):user-invalid { box-shadow: none; }
#itit-booking-app :is(h1, h2, h3, h4, h5, h6) { color: #222; }
#itit-booking-app :is(h1, h2, h3, h4, h5, h6) * { color: inherit; }
#itit-booking-app :is(h1, h2, h3, h4, h5, h6) + * { margin-top: 0; }
#itit-booking-app .itit-dates-title + .itit-dates-top { margin-top: -8px; } /* (its own, after the line above) */
#itit-booking-app .itit-items-list, #itit-booking-app .itit-items-list li { padding-left: 0; } /* (the item rows: not indented) */
/* The icons (drawn with lines): the theme makes every path, rect, line and polygon 0.1px thin; they take their SVG's
   thickness again (its stroke-width attribute) */
.itit-booking-app :is(path, rect, line, polygon, polyline, circle, ellipse) { stroke-width: inherit; }
/* The theme also colours every field's border and tick in the page's colour (red on the Lab page): the plugin's greys
   and ticks again (doubled class: stronger than the theme's "[data-bg-color] select") */
.itit-booking-app.itit-booking-app :is(textarea, input, select) { border-color: #aaa; accent-color: auto; }
.itit-booking-app.itit-booking-app :is(.itit-units-select, .itit-main-times .itit-time-field) { border-color: #bbb; }
.itit-booking-app.itit-booking-app :is(textarea, input, select):focus { border-color: #555; }
.itit-booking-app.itit-booking-app .itit-cat-option input { accent-color: #0073aa; }
.itit-booking-app.itit-booking-app .itit-suggest-row input { accent-color: #2a8a2a; }

.itit-booking-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    color: #222;
    max-width: 1100px;
    margin: 0 auto;
}

/* Guest landing (login required) ---------------------------- */
.itit-guest-landing { padding: 8px 0 24px; font-size: 14px; color: #333; }
.itit-guest-landing p { margin: 0 0 14px; line-height: 1.5; }
.itit-guest-title { font-size: 18px; margin: 0 0 10px; }
.itit-guest-categories { margin: 0 0 18px; }
.itit-guest-categories .itit-cat-pill { font-size: 13px; padding: 4px 10px; margin: 0 4px 6px 0; }

/* Tabs ------------------------------------------------------- */
/* Folder tabs, like the booking window's: rounded tops, a little space between them, the line below
   runs under the closed ones; the open one covers it. They keep their size when picked (an invisible
   bold copy of the name, data-label set in bindTabs, reserves the bold width), and no thick outline. */
.itit-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding-left: 4px;
    border-bottom: 1px solid #aaa;
    margin-bottom: 16px;
}
.itit-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: #e8e8e8;
    border: 1px solid #aaa;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
    padding: 6px 18px;
    font-size: 13px;
    white-space: nowrap; /* (each name on one line, all the same height) */
    cursor: pointer;
    color: #444;
}
.itit-tab:hover  { background: #ddd; }
.itit-tab.active { margin-bottom: -1px; padding-bottom: 7px; background: #fff; color: #000; font-weight: 600; }
.itit-tab::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; user-select: none; }
.itit-tab:focus  { outline: none; box-shadow: none; }
.itit-tab:focus-visible { text-decoration: underline; }

/* Lab manager's own row (2026-10-10), under the tabs on the left: PENDING · ALL BOOKINGS · ACCESS, as plain words in capitals, the open one underlined */
.itit-subtabs { display: flex; justify-content: flex-start; gap: 18px; margin: -10px 0 16px; padding: 0 4px; } /* (2026-10-10: on the left, in capitals, to be seen) */
.itit-subtabs[hidden] { display: none; }
.itit-tab.itit-subtab { text-transform: uppercase; letter-spacing: .03em; padding: 4px 0; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: #555; }
.itit-tab.itit-subtab:hover { background: none; color: #000; }
.itit-tab.itit-subtab.active { margin-bottom: 0; padding-bottom: 4px; border-bottom-color: #000; color: #000; }
.itit-tab-content        { display: none; }
.itit-tab-content.active { display: block; }

/* Toolbar ---------------------------------------------------- */
.itit-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.itit-search-input {
    padding: 5px 9px;
    border: 1px solid #aaa;
    font-size: 13px;
    outline: none;
    width: 220px;
}
.itit-search-input:focus { border-color: #555; }

.itit-category-filters { display: flex; flex-wrap: wrap; gap: 4px; }

/* Browse: filters on the left, the list on the right ------- */
.itit-browse { display: flex; gap: 18px; align-items: flex-start; }
.itit-browse-side { flex: 0 0 170px; position: sticky; top: 16px; }
.itit-browse-main { flex: 1 1 auto; min-width: 0; padding-left: 18px; border-left: 1px solid #e2e2e2; } /* a thin line between the filters and the items */
.itit-browse-side .itit-category-filters { flex-direction: column; gap: 0; }
.itit-cat-option { display: flex; align-items: center; gap: 7px; padding: 4px 8px; font-size: 13px; color: #333; cursor: pointer; border-left: 2px solid transparent; }
.itit-cat-option input { margin: 0; cursor: pointer; accent-color: #0073aa; }
.itit-cat-option:hover { background: #f2f2f2; }
.itit-cat-option.is-checked { color: #000; font-weight: 600; background: #f2f6fa; border-left-color: #0073aa; }
.itit-cat-name { flex: 1 1 auto; }
.itit-cat-count { font-size: 11px; font-weight: 400; color: #999; }
@media ( max-width: 700px ) {
    .itit-browse { flex-direction: column; align-items: stretch; gap: 10px; } /* stretch: the list/grid takes the screen's width, not its widest content */
    .itit-browse-side { position: static; flex-basis: auto; width: 100%; }
    .itit-browse-main { padding-left: 0; border-left: 0; } /* stacked: no line */
    .itit-browse-side .itit-category-filters { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .itit-cat-option { border: 1px solid #ccc; border-radius: 2px; padding: 3px 10px; }
    .itit-cat-option.is-checked { border-color: #222; }
}

/* List | Grid switch, and the Grid's cards ------------------ */
#itit-booking-app [hidden] { display: none !important; }
.itit-view-switch { display: inline-flex; margin-left: 0; border: 1px solid #bbb; border-radius: 4px; overflow: hidden; }
.itit-view-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; color: #444; background: #fff; border: 0; cursor: pointer; }
.itit-view-btn + .itit-view-btn { border-left: 1px solid #bbb; }
.itit-view-btn:hover { background: #f2f2f2; }
.itit-view-btn.active { color: #fff; background: #222; }
.itit-view-btn:focus { outline: none; }
.itit-view-btn:focus-visible { text-decoration: underline; }
.itit-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) ); gap: 18px 16px; max-width: 900px; } /* smaller squares: five a row in the ITI site's column */
/* A card (3.0.0, 2026-10-08): a square picture, its name and brand / model centred under it (no frame). The picture: a click
   books it; on hover the open hand (Book it, bottom left, green) and the basket with a small + at its top left (bottom right: only adds it); several photos slide
   by on hover (booking.js bindCardPictures), dots at the bottom. Nothing covers or darkens the photos until the mouse is on it. */
.itit-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* the name close under the picture */
.itit-card-img { position: relative; aspect-ratio: 1 / 1; min-height: 0; background: #f4f4f4; border: 1px solid #c8c8c8; border-radius: 6px; cursor: pointer; }
.itit-card-img:hover { border-color: #555; box-shadow: 0 0 0 1px #555; }
.itit-card.itit-in-basket .itit-card-img { border-color: #2a8a2a; box-shadow: 0 0 0 1px #2a8a2a; } /* in the basket: a green outline (2px; a shadow, so nothing moves) */
.itit-card-frame { position: absolute; inset: 0; overflow: hidden; border-radius: 5px; }
.itit-card-track { display: flex; height: 100%; transition: transform .45s ease; }
.itit-card-track img, .itit-card-track svg { display: block; flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* photos fill the square; tall ones lose the bottom */
.itit-card-track img.itit-on-white { object-fit: contain; object-position: center; background: #fff; } /* product shots on white: shown whole, in the middle both ways (2026-10-11: as in the item window; they were at the top) */
.itit-card-dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 4px; pointer-events: none; } /* at the bottom, level with the hand and the basket (between them: up to 8 dots fit) */
.itit-card-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba( 255, 255, 255, .6 ); box-shadow: 0 0 0 1px rgba( 0, 0, 0, .18 ); }
.itit-card-dots i.is-on { background: rgba( 0, 0, 0, .45 ); } /* (see-through, not black) */
.itit-card-actions { display: contents; }
.itit-card-img .itit-card-add { position: absolute; right: 6px; bottom: 5px; display: none; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; padding: 0;
    background: rgba( 255, 255, 255, .95 ); border: 1.75px solid #2a8a2a; border-radius: 50%; color: #2a8a2a; } /* (2026-10-11: the circle and the + thicker) */
.itit-card-img .itit-card-add svg { position: static; width: 16px; height: 16px; margin: 0; } /* (the + or ✓, centred in the circle) */
.itit-card-img .itit-card-add:hover, .itit-card-img .itit-card-add:focus-visible { background: #e2f0e2; border-color: #2a8a2a; color: #2a8a2a; }
.itit-card-img .itit-card-add.is-in { display: flex; background: #2a8a2a; color: #fff; } /* in the request: always shown, green (✓, or how many if several) */
.itit-card-img:has(:focus-visible) .itit-card-add { display: flex; } /* (keyboard focus only: a click leaves them to the hover) */
@media ( hover: hover ) { .itit-card-img:hover .itit-card-add { display: flex; } } /* only with a mouse: phones have no icons (a tap opens
   the item's window, with "Add to your request"; showing them on a tap would also make an iPhone's first tap only show them) */
.itit-card-add-label { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1; } /* a + (✓ once it's in; how many, if several): as the list's + in a circle */
.itit-card-add-label svg { display: block; }
.itit-card-img .itit-card-add::before, .itit-card-img .itit-card-add::after { display: none; } /* (no balloon on the picture: a title says what a click does) */
.itit-card-body { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 2px; min-width: 0; text-align: center; cursor: pointer; } /* a click: the item's description */
.itit-card-name { font-size: 13px; font-weight: 600; line-height: 1.3; color: #222; text-decoration: none; text-underline-offset: 2px; } /* (2026-10-10: not underlined; the picture opens it too) */
.itit-card-body:hover .itit-card-name { color: #000; text-decoration: underline; } /* (the mouse on it or on the picture: underlined) */
/* The picture and the name open the same window (2026-10-09): hovering one highlights both; not the + (it only adds) */
.itit-card:has(.itit-card-img:hover):not(:has(.itit-card-add:hover)) .itit-card-name { color: #000; text-decoration: underline; }
.itit-card:not(.itit-in-basket):has(.itit-card-body:hover) .itit-card-img { border-color: #555; box-shadow: 0 0 0 1px #555; } /* (in the request: its green outline stays) */
.itit-card-model { max-width: 100%; font-size: 11px; font-weight: 400; line-height: 1.35; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media ( max-width: 480px ) { .itit-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 10px; } } /* phones: two cards per row */

/* Table ------------------------------------------------------ */
.itit-table-wrap  { overflow-x: auto; }
#itit-list-view   { zoom: 1.1; } /* the List view 10% larger (text, icons and widths); syncModelWidth measures with clientWidth because of it */

.itit-equipment-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #aaa;
    background: #fff;
    font-size: 12px;
}

.itit-equipment-table thead th {
    background: #d9d9d9;
    border: 1px solid #aaa;
    padding: 5px 8px;
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
}

/* Sortable column headers */
.itit-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.itit-sortable:hover { background: #ccc; }

.itit-sort-icon {
    font-size: 10px;
    color: #888;
    margin-left: 3px;
}
.itit-sortable[data-dir="asc"]  .itit-sort-icon,
.itit-sortable[data-dir="desc"] .itit-sort-icon {
    color: #222;
    font-size: 11px;
}

/* Category header rows — subtle, no colour */
.itit-cat-header-row td {
    background: #f0f0f0;
    border: 1px solid #aaa;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #444;
}

/* Equipment rows */
.itit-equipment-row td {
    border: 1px solid #d0d0d0;
    padding: 4px 8px;
    vertical-align: middle;
    background: #fff;
}
.itit-equipment-row:nth-child(even) td { background: #fafafa; }
.itit-equipment-row                     { cursor: pointer; }
.itit-equipment-row:hover td           { background: #f5f5f5; }

.itit-td-name   { font-weight: 600; white-space: nowrap; color: #0073aa; }
.itit-equipment-row:hover .itit-td-name { color: #005a87; text-decoration: underline; }
.itit-td-model  { color: #555; }

/* Category pills in table */
.itit-cat-pill {
    display: inline-block;
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 1px 5px;
    font-size: 10px;
    margin: 1px 1px;
    white-space: nowrap;
    line-height: 1.4;
}

.itit-muted { color: #bbb; }

/* + / × expand toggle — no box, just a symbol */
.itit-book-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #aaa;
    display: block;
    width: 100%;
    text-align: center;
}
.itit-book-btn:hover   { color: #000; }
.itit-book-btn.is-open { color: #000; }

/* Expanded row indicator */
.itit-equipment-row.is-expanded td { background: #f0f5ff !important; }

/* Row is in the booking list */

/* "Add to Booking List →" button inside detail panel */

/* Detail row ------------------------------------------------- */
.itit-detail-cell {
    border: 1px solid #aaa !important;
    padding: 0 !important;
    background: #fafafa !important;
}

.itit-detail-inner {
    display: grid;
    grid-template-columns: 150px auto auto;
    gap: 48px;
    padding: 16px 18px;
    align-items: flex-start;
    width: fit-content;
}

/* Square image, details to the right */
.itit-detail-image {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border: 1px solid #ccc;
    overflow: hidden;
    background: #f0f0f0;
    cursor: pointer;
}
.itit-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.itit-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #aaa;
    font-size: 11px;
}
.itit-img-placeholder svg { width: 60px; height: 45px; }

/* Detail info */
.itit-detail-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.itit-detail-title { font-size: 14px; }
.itit-detail-title strong { font-weight: 700; }
.itit-detail-title em     { color: #666; font-style: italic; }

.itit-detail-desc {
    margin: 0;
    color: #444;
    line-height: 1.5;
    font-size: 13px;
}

/* Specs mini-table */
.itit-detail-specs {
    border-collapse: collapse;
    font-size: 12px;
}
.itit-detail-specs td {
    padding: 2px 12px 2px 0;
    vertical-align: top;
    color: #555;
}
.itit-detail-specs td:first-child {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    width: 120px;
}

/* Files inline in specs table */

.itit-file-button {
    display: inline-block;
    padding: 6px 12px;
    background: #007cba;
    color: #fff;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}
.itit-file-button:hover { background: #005a87; }

/* Accessories & Related equipment ----------------------------- */
.itit-related-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    border-top: 1px solid #e8e8e8;
}

.itit-related-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.itit-related-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    white-space: nowrap;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.itit-related-item {
    display: inline-block;
    font-size: 11px;
    background: #f4f4f4;
    border: 1px solid #ddd;
    padding: 1px 7px;
    color: #444;
}

/* Clickable related-equipment link */
button.itit-related-link {
    cursor: pointer;
    background: #eef3fc;
    border-color: #b0c8f0;
    color: #1a4a8a;
    text-decoration: none;
}
button.itit-related-link:hover {
    background: #ddeafc;
    border-color: #7aa8e0;
}

/* Inquiry form */
/* Use / Inquire tabs in the booking window (the same look as the page's tabs). Both panes sit in one
   grid cell, so the window keeps its height when switching; the hidden one is just invisible. */
/* Folder tabs: rounded tops, a little space between them; the open one joins the page below. */
.itit-panel-tabs { display: flex; align-items: flex-end; gap: 4px; padding-left: 4px; border-bottom: 1px solid #aaa; margin: 0 0 12px; }
.itit-panel-tab { display: inline-flex; flex-direction: column; align-items: center; margin-bottom: 0; padding: 5px 16px; font-size: 13px; color: #444; background: #e8e8e8; border: 1px solid #aaa; border-bottom: none; border-radius: 8px 8px 0 0; cursor: pointer; }
.itit-panel-tab:hover { background: #ddd; }
/* No thick focus outline when clicked (themes add one); keyboard users still see which tab has focus. */
.itit-panel-tab:focus, .itit-open-item:focus { outline: none; box-shadow: none; }
.itit-panel-tab:focus-visible { text-decoration: underline; }
/* Only the open tab covers the line below the tabs, so the line runs under the others. */
.itit-panel-tab.active { margin-bottom: -1px; padding-bottom: 6px; background: #fff; color: #000; font-weight: 600; }
/* Tabs keep their size when picked: an invisible bold copy of the name reserves the bold width, and the
   open tab's extra 1px at the bottom only covers the line (its top stays level with the others). */
.itit-panel-tab::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; user-select: none; }
.itit-panel-panes { display: grid; }
.itit-pane { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.itit-pane.active { visibility: visible; }
.itit-pane-description { font-size: 12px; color: #333; }
/* Details: the labels (left) bold, the values (right) plain; all at the description's size (13.5px), every line the same height
   (20px), the category tags too. */
.itit-pane-description .itit-detail-specs td { font-size: 13.5px; line-height: 20px; }
.itit-pane-description .itit-cat-pill { display: inline; margin: 0 2px 0 0; font-size: 12px; line-height: inherit; } /* (inline: a tag doesn't make its line taller) */
.itit-pane-description .itit-detail-specs td:first-child { font-weight: 600; color: #222; width: 1%; padding-right: 14px; } /* labels close to their values */
.itit-pane-description .itit-detail-specs td:last-child { font-weight: 400; color: #333; } /* the labels bold, the values not */
.itit-pane-description .itit-desc-row td { padding-top: 8px; } /* a line above the description (below: the window's lines) */
.itit-pane-description .itit-desc-row + tr td, .itit-pane-description tr:has( + .itit-desc-row ) td { padding-bottom: 8px; }
.itit-managers-only, .itit-prev-about { font-weight: 400; color: #888; font-size: 11px; }
.itit-prev-about { display: block; margin-top: -2px; } /* (Used before by: their position and department under the name, small, close under it) */
.itit-managers-line { display: block; } /* ("(visible to lab managers only)" always on its own line, under the Where text) */
.itit-prev-about.itit-note-who { display: inline; margin-left: 6px; } /* (a problem: who and when, small, after "Problem reported / fixed") */
.itit-fixed-tick { color: #2a8a2a; }
/* Inquire: a box just tall enough for the example questions (it can be dragged taller), the envelope button right under it,
   so the button shows even when another tab makes the window taller than the screen. */
.itit-inquire-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e2e2e2; } /* under the description */
.itit-inquire-title { margin: 0; font-size: 13px; font-weight: 600; color: #222; }
.itit-inquire-form .itit-inquire-msg { flex: 0 0 auto; height: calc( 3 * 1.4em + 12px ); width: 100%; box-sizing: border-box; font-size: 13px; line-height: 1.4; resize: vertical; } /* the example questions, wrapped on about 3 lines */
@media ( max-width: 480px ) { .itit-inquire-form .itit-inquire-msg { height: calc( 5 * 1.4em + 12px ); } }
.itit-inquire-note { font-size: 12px; color: #777; }
.itit-inquire-form .itit-inquire-btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 30px; padding: 0; }

.itit-inquire-msg {
    font-size: 12px;
    font-family: inherit;
    padding: 5px 8px;
    border: 1px solid #bbb;
    resize: vertical;
    outline: none;
}
.itit-inquire-msg:focus { border-color: #555; }

.itit-inquire-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.itit-inquire-btn {
    background: #f0f0f0;
    border: 1px solid #aaa;
    padding: 3px 12px;
    font-size: 12px;
    cursor: pointer;
}
.itit-inquire-btn:hover:not(:disabled) { background: #e0e0e0; }
.itit-inquire-btn:disabled             { opacity: .6; cursor: default; }

.itit-inquire-result {
    font-size: 12px;
    font-weight: 500;
}
.itit-inquire-success { color: #2a6a2a; }
.itit-inquire-error   { color: #8a2a2a; }
.itit-inquire-warning { color: #6a5a00; }

/* Booking panel (Modal) ---------------------------------------------- */
.itit-booking-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.itit-booking-panel.active {
    display: flex;
}

.itit-booking-panel-inner {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 16px 20px 18px;
    max-width: 520px;           /* wide enough that "How it works" doesn't need much scrolling */
    width: calc(100% - 24px);   /* always fits the screen (padding included) */
    box-sizing: border-box;
    max-height: calc( 90vh / var( --itit-zoom, 1 ) ); /* (Text size: viewport sizes are scaled too) */
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.itit-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}
.itit-panel-header h3 { margin: 0; font-size: 16px; }
#itit-panel-title { color: #0073aa; } /* the item's name, in the same blue as in the equipment list */
/* The item's window: the name under the picture (above the tabs); ✕ in the corner, over the picture */
#itit-panel-form-view { position: relative; }
.itit-panel-close.itit-panel-close-corner { position: absolute; top: -6px; left: -10px; z-index: 2; width: 30px; height: 30px; box-sizing: border-box; border: 0; border-radius: 50%; background: rgba( 255, 255, 255, .9 ); } /* no line, no shadow */
.itit-panel-title { margin: 10px 0 6px; padding-left: 30px; font-size: 17px; line-height: 1.3; }

.itit-panel-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.itit-panel-close:hover { color: #000; }
.itit-panel-close:focus { outline: none; box-shadow: none; }                /* no ring when clicked */
.itit-panel-close:focus-visible { background: #f0f0f0; }                  /* (keyboard: a light fill instead) */

.itit-panel-meta {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Booking form */
.itit-form-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.itit-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 120px;
}
.itit-form-group label  { font-size: 12px; font-weight: 600; }
.itit-req               { color: #c00; }

.itit-form-group input,
.itit-form-group textarea {
    padding: 5px 8px;
    border: 1px solid #aaa;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}
.itit-form-group input:focus,
.itit-form-group textarea:focus { border-color: #555; }

.itit-availability-check {
    padding: 6px 10px;
    font-size: 12px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    background: #f8f8f8;
}
.itit-avail-success { background: #f0fff0; border-color: #6a6; color: #2a6a2a; }
.itit-avail-error   { background: #fff0f0; border-color: #c66; color: #8a2a2a; }
.itit-avail-warning { background: #fffbe6; border-color: #cc9; color: #6a5a00; }
.itit-avail-checking { background: #f8f8f8; color: #888; }

.itit-form-actions { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }

.itit-btn {
    padding: 5px 14px;
    font-size: 13px;
    border: 1px solid #aaa;
    cursor: pointer;
    background: #f0f0f0;
}
.itit-btn:hover:not(:disabled) { background: #e0e0e0; }
.itit-btn:disabled              { opacity: .5; cursor: not-allowed; }
/* Main buttons: white, black text, a black outline as thick as the bold text (2px) */
.itit-btn-primary  { padding: 4px 13px; background: #fff; color: #222; font-weight: 600; border: 2px solid #222; }
.itit-btn-primary:hover:not(:disabled) { background: #f0f0f0; }
.itit-btn-primary:disabled { opacity: 1; color: #aaa; } /* not available yet: the outline stays, only the text (or icon) is greyed */

.itit-booking-result {
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid #ccc;
}
.itit-result-success { background: #f0fff0; border-color: #6a6; color: #2a6a2a; }
.itit-result-error   { background: #fff0f0; border-color: #c66; color: #8a2a2a; }

/* Booking List tab ------------------------------------------- */

/* My Bookings ------------------------------------------------ */
.itit-bookings-list    { display: flex; flex-direction: column; gap: 8px; }

.itit-booking-row {
    border: 1px solid #d0d0d0;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: #fff;
}
.itit-booking-info           { display: flex; flex-direction: column; gap: 3px; }
.itit-booking-info strong    { font-size: 13px; }
.itit-booking-info em        { font-size: 12px; color: #777; }
.itit-booking-time           { font-size: 12px; color: #444; }
.itit-booking-notes          { font-size: 11px; color: #888; font-style: italic; }
.itit-booking-actions        { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.itit-status-badge {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #bbb;
    background: #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.itit-status-confirmed   { border-color: #6a6; background: #f0fff0; color: #2a6a2a; }
.itit-status-pending     { border-color: #cc9; background: #fffbe6; color: #6a5a00; }
.itit-status-rejected    { border-color: #c66; background: #fff0f0; color: #8a2a2a; }
.itit-status-returned    { border-color: #99b; background: #f2f2fa; color: #44446a; }
.itit-extend-form { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.itit-extend-form input, .itit-extend-form select { padding: 3px 4px; font-size: 12px; }
.itit-status-cancelled   { border-color: #bbb; background: #f5f5f5; color: #777; }
.itit-status-unverified  { border-color: #0056b3; background: #e7f3ff; color: #0056b3; }

.itit-btn-danger { background: #fff0f0; border-color: #c66; color: #8a2a2a; }
.itit-btn-danger:hover:not(:disabled) { background: #ffe0e0; }

/* Calendar (Flatpickr overrides) -------------------------------- */
.flatpickr-calendar {
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 12px;
}

.flatpickr-day {
    color: #333;
}

.flatpickr-day.selected {
    background: #2a8a2a;
    border-color: #2a8a2a;
    color: #fff;
}

.flatpickr-day.today {
    border-color: #ccc;
    background: #f0f0f0;
}

.flatpickr-day:hover {
    background: #e8e8e8;
}

/* Fully booked days can't be picked (flatpickr also marks them .flatpickr-disabled, which would
   otherwise make them near-invisible). Days with a unit still free are just available: no colour.
   Yellow: booked, but you can still ask the person for it. Red with an ✕: booked by members of the
   item's ITI research line, and you're not one, so it can't be asked for. */
.flatpickr-day.flatpickr-disabled.itit-day-full,
.flatpickr-day.flatpickr-disabled.itit-day-full:hover {
    background: #fbe7a6;
    border-color: #fbe7a6;
    color: #4a3d00;
    cursor: not-allowed;
}
.flatpickr-day.flatpickr-disabled.itit-day-locked,
.flatpickr-day.flatpickr-disabled.itit-day-locked:hover {
    color: #7a1710;
    font-weight: 700;
    border-color: #f4c2bd;
    cursor: not-allowed;
    /* a thin, light ✕ behind the number, so the number stays readable */
    background:
        linear-gradient( to top right, transparent calc(50% - 1px), rgb(217 48 37 / .45) calc(50% - 1px), rgb(217 48 37 / .45) calc(50% + 1px), transparent calc(50% + 1px) ) center / 72% 72% no-repeat,
        linear-gradient( to top left,  transparent calc(50% - 1px), rgb(217 48 37 / .45) calc(50% - 1px), rgb(217 48 37 / .45) calc(50% + 1px), transparent calc(50% + 1px) ) center / 72% 72% no-repeat,
        #fde2e0;
}

.itit-booked-list { margin: -4px 0 12px; padding: 6px 10px; font-size: 11px; color: #555; background: #fffbea; border: 1px solid #f0d58a; }
.itit-booked-list ul { margin: 4px 0 0 16px; padding: 0; }
.itit-open-ended-option { display: block; margin: -4px 0 12px; font-size: 12px; }
.itit-request-box { margin: -4px 0 12px; }
.itit-request-box textarea { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.itit-request-help { font-size: 11px; color: #666; margin: 6px 0; }
.itit-status-shared      { border-color: #7aa; background: #effafa; color: #2a5a5a; }
.itit-open-ended-option span { color: #777; font-size: 11px; }

/* Access tab (lab managers) */
/* All Bookings: From [month] to [month] Download as spreadsheet (2026-10-10) */
.itit-csv-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex: 1 1 100%; font-size: 13px; }
.itit-csv-download { margin-left: auto; } /* (at the right end of the filter's line) */
.itit-all-toolbar #itit-all-search { flex: 0 1 320px; }
.itit-csv-month select { width: auto; margin-left: 4px; }
#itit-tab-access { font-size: 13px; }
#itit-tab-access h2 { font-size: 15px; }
.itit-access-table { width: 100%; border-collapse: collapse; background: #fff; }
.itit-access-table th, .itit-access-table td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; vertical-align: top; }
.itit-access-table th { background: #f4f4f4; }
/* "In use" tab */
.itit-in-use-table { font-size: 13px; }
/* Pending tab: when each entry arrived by email (left), and how long ago */
/* Pending (2026-10-10): laid out as My Bookings (its classes: .itit-my-list, .itit-my-group, .itit-my-row); a title per part */
#itit-tab-pending .itit-pend-title:first-child { margin-top: 4px; }
#itit-tab-pending .itit-pend-title { margin: 24px 0 10px; }
#itit-tab-pending .itit-my-actions .itit-my-note { color: #666; } /* ("Override:" before an item manager's buttons) */
.itit-arrived { flex: 0 0 74px; display: flex; flex-direction: column; font-size: 12px; color: #333; }
.itit-arrived span { font-size: 11px; color: #888; }
.itit-arrived + .itit-booking-info { flex: 1 1 auto; } /* the details take the middle; buttons stay on the right */
/* All Bookings tab */
.itit-all-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.itit-all-heading { margin: 16px 0 8px; font-size: 15px; }
.itit-all-divider { margin: 22px 0 6px; border: 0; border-top: 1px solid #ddd; }
#itit-past-more { margin-top: 10px; }
.itit-in-use-table .itit-muted { font-size: 12px; }
.itit-status-overdue  { color: #a32a1e; font-weight: 600; }
.itit-status-today    { color: #8a5a00; font-weight: 600; }
.itit-status-reported { color: #1f5e1f; }
.itit-status-open     { color: #555; }

/* Lightbox (Image Viewer) --------------------------------------- */
.itit-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(200, 200, 200, 0.8);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.itit-lightbox.active {
    display: flex;
}

.itit-lightbox-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: calc( 90vw / var( --itit-zoom, 1 ) ); /* (Text size: viewport sizes are scaled too) */
    max-height: calc( 90vh / var( --itit-zoom, 1 ) ); /* (Text size: viewport sizes are scaled too) */
}

.itit-lightbox-img {
    max-width: calc( 80vw / var( --itit-zoom, 1 ) ); /* (Text size: viewport sizes are scaled too) */
    max-height: calc( 90vh / var( --itit-zoom, 1 ) ); /* (Text size: viewport sizes are scaled too) */
    display: block;
}

.itit-lightbox-close {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 0;
}

.itit-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Misc ------------------------------------------------------- */
.itit-loading    { color: #888; font-style: italic; }
.itit-empty      { color: #888; }
.itit-no-results { padding: 30px; text-align: center; color: #888; }

@media ( max-width: 700px ) {
    .itit-form-row     { flex-direction: column; }
    .itit-form-actions { flex-direction: column; }
    .itit-detail-inner { flex-direction: column; }
    .itit-detail-image { width: 100%; min-height: 180px; align-self: auto; }
    .itit-booking-row  { flex-direction: column; align-items: flex-start; }
    .itit-equipment-table th { white-space: normal; }
    .itit-td-model { word-wrap: break-word; word-break: break-word; }
}

/* Research lines */

.itit-line-notice { display: block; margin: 2px 0; }
/* Use tab: the short research line note for people outside the line */
.itit-line-note { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: #555; }
.itit-line-join { margin-left: 4px; padding: 1px 8px; font-size: 11px; font-weight: 600; color: #222; background: #fff; border: 2px solid #222; border-radius: 3px; cursor: pointer; }
.itit-line-join:hover { background: #444; }
.itit-line-join:disabled { opacity: .5; cursor: default; }
.itit-line-note-status { color: #6a5a00; }
/* Use tab, above the start date: who confirms the booking */
.itit-access-note { margin: 0 0 10px; font-size: 12px; color: #555; }
.itit-waiting { font-size: 12px; color: #8a5a00; white-space: nowrap; } /* Pending tab: waiting for an item manager */
.itit-override { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.itit-override-label { font-size: 11px; color: #777; }
.itit-override-buttons { display: flex; gap: 6px; }
/* A line between Notes and the Position / Department asked once */
.itit-who-fields { margin: 0 0 12px; padding-top: 12px; border-top: 1px solid #e0e0e0; }
.itit-who-fields .itit-request-help { margin-bottom: 0; }
/* Documents in the Description tab: one link each */
.itit-docs { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.itit-panel-meta:empty { display: none; }

.itit-inquire-booking { margin: 3px 0 5px; padding: 2px 8px; font-size: 11px; }

.itit-request-form { margin-top: 8px; padding: 10px 12px; background: #f7f7f7; border: 1px solid #ddd; }
.itit-request-form > strong { display: block; font-size: 13px; margin-bottom: 4px; }
.itit-request-form textarea { font-family: inherit; } /* (the message: the page's font, not the browser's monospace) */
.itit-request-explain { font-size: 12px; line-height: 1.45; color: #333; margin: 0 0 10px; }

/* "How did it go?": stars, notes, problem warning */
/* Hand / ? columns */
.itit-th-open, .itit-td-open { width: 30px; white-space: nowrap; text-align: center; padding-left: 4px !important; padding-right: 4px !important; }
#itit-equipment-table th.itit-th-open { text-align: center; }
/* The list with only thin horizontal lines between rows (no outline, no vertical lines). */
#itit-equipment-table, #itit-equipment-table th, #itit-equipment-table td { border: none; }
#itit-equipment-table th, #itit-equipment-table td { border-bottom: 1px solid #e2e2e2; }
/* Only as wide as its content needs (at most 720px), so the columns sit close together. */
#itit-equipment-table { width: auto; max-width: 720px; }
/* (No percentage widths here: in a table that shrinks to its content, a % width stretches the whole table.) */
/* Brand / Model 70px wider than the Name column (--itit-name-w, set by syncModelWidth in booking.js);
   a longer model ends in "…" (the whole model shows on hover). */
#itit-equipment-table .itit-td-model { white-space: nowrap; font-weight: 600; }
/* Plain (not bold) column headers */
#itit-equipment-table thead th { font-weight: 400; }
#itit-equipment-table .itit-model-text, #itit-equipment-table .itit-th-model { display: block; width: calc( var(--itit-name-w, 150px) + 70px ); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a little wider than Name */
#itit-equipment-table .itit-th-model { display: table-cell; }
#itit-equipment-table .itit-td-model .itit-muted { display: inline-block; width: calc( var(--itit-name-w, 150px) + 70px ); }
/* Thinner rows: less padding, a smaller + */
#itit-equipment-table td { padding-top: 2px; padding-bottom: 2px; }
#itit-equipment-table .itit-open-item { height: 24px; }
#itit-equipment-table .itit-open-item svg { width: 19px; height: 19px; }
.itit-open-item { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin: 0 1px;
    background: none; border: 1px solid transparent; border-radius: 3px; color: #555; cursor: pointer; vertical-align: middle; }
.itit-open-item:hover, .itit-open-item:focus-visible { color: #fff; background: #222; border-color: #222; }
/* Its explanation shows straight away on hover (a native title waits about a second). */
.itit-open-item { position: relative; }
.itit-open-item::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 10;
    padding: 4px 8px; background: #222; color: #fff; font-size: 11px; font-weight: 400; line-height: 1.3; white-space: nowrap; border-radius: 3px;
    opacity: 0; pointer-events: none; transition: opacity .08s; }
.itit-open-item[data-pane="inquire"]::after { left: auto; right: 0; transform: none; } /* last column: keep it inside the table */
#itit-equipment-table .itit-open-item[data-pane="use"]::after { left: 0; transform: none; } /* first column (2026-10-10): from its left edge, or the table's frame cuts it */
.itit-open-item:hover::after, .itit-open-item:focus-visible::after { opacity: 1; }
.itit-stars { letter-spacing: 1px; white-space: nowrap; }
.itit-stars-on { color: #f0b400; }
.itit-stars-off { color: #d8d8d8; }
.itit-rating-row { display: block; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.itit-rating-label { color: #777; font-size: 10px; }
.itit-problem-tag { display: block; font-size: 10px; color: #b35c00; margin-top: 2px; font-weight: normal; }
.itit-problem-text { color: #b35c00; }
.itit-feedback-notes { margin-top: 10px; font-size: 11px; }
#itit-booking-panel .itit-feedback-notes { margin-top: 0; font-size: 13px; } /* (in the item's window: as the Description; the line above it centred: #itit-desc-content) */
#itit-booking-panel .itit-note p { margin: 0; line-height: 1.35; } /* (2026-10-11: each review's lines closer together) */
#itit-booking-panel .itit-note .itit-note-head, #itit-booking-panel .itit-note .itit-note-line { line-height: 1.35; }
#itit-booking-panel .itit-note .itit-note-actions { margin: -2px 0 0; line-height: 1.1; } /* (a little closer to the line above it) */
#itit-booking-panel .itit-note .itit-note-actions:has( .itit-note-solve ) { margin-top: 0; } /* (Mark as solved: 2px lower than Remove's, 2026-10-11) */
#itit-booking-panel .itit-feedback-notes .itit-note { margin-top: 14px; } /* (and a little more space between one review and the next) */
#itit-booking-panel .itit-feedback-notes .itit-note:first-of-type { margin-top: 4px; }
#itit-booking-panel .itit-note .itit-note-actions button, #itit-booking-panel .itit-note .itit-note-actions a { min-height: 0; margin: 0; padding: 0; line-height: 1.2; vertical-align: baseline; } /* (the site's button spacing: not here) */ /* (the site's paragraph spacing: not here; "Fixed: …" right under the problem) */
.itit-review-sep { height: 0; margin: 12px 0 0; border-top: 1px solid #e4e4e4; } /* between the problems and what people say: thin and light */
.itit-review-title { margin: 16px 0 4px; } /* Description, Problems, What people say: one title style, as "Inquire about this equipment?" */
.itit-feedback-notes > .itit-review-title { margin-top: 0; }
.itit-feedback-notes .itit-note:first-of-type { margin-top: 4px; }
.itit-note { padding: 0; margin: 10px 0 0; } /* (2026-10-10: no lines between notes: who and when first, then their words) */
.itit-note-head { display: block; color: #555; }
.itit-note-head strong { color: #222; font-weight: 400; }
.itit-note p { margin: 2px 0 0; color: #333; line-height: 1.4; }
.itit-prev-user { display: block; margin: 0 0 4px; }
.itit-note-stars { color: #777; font-size: 10px; }
.itit-note-line { display: block; }
.itit-note-by { color: #888; }
.itit-note-more { display: none; }
.itit-notes-open .itit-note-more { display: block; }
.itit-note-show-all, .itit-note-remove { background: none; border: none; padding: 0; color: #0066cc; cursor: pointer; text-decoration: underline; font-size: 11px; }
.itit-note-remove { color: #777; margin-left: 8px; } /* (2026-10-11: grey; red only when the mouse is on it, so always grey on touch screens) */
@media ( hover: hover ) { .itit-note-remove:hover { color: #a33; } }
.itit-note-actions { display: block; } /* (2026-10-11: Mark as solved / Remove on their own line, under the problem or the name) */
.itit-note-actions .itit-note-remove { margin-left: 0; }
.itit-warn { position: relative; top: -1px; font-size: .8em; } /* (the ⚠️ a little smaller, 1px higher: level with its words) */
.itit-note-solve { margin-left: 0; color: #2a8a2a; font-size: 11px; text-decoration: underline; } /* ("Mark as solved" next to an open problem, lab managers: a link to its page) */

/* Tabs: theirs on the left, the lab managers' (Pending, Access) on the right */
.itit-tab-right { margin-left: auto; }

/* Profile tab */
.itit-profile { display: flex; flex-direction: column; gap: 18px; max-width: 720px; font-size: 13px; }
.itit-profile-section { background: #fff; border: 1px solid #ddd; padding: 14px 16px; }
.itit-profile-section h3 { margin: 0 0 10px; font-size: 15px; }
.itit-profile-section p { margin: 6px 0; }
/* Your lab access: a line each, with a bullet; the introduced / lab manager line with a green ✓; instant access items with a dash */
.itit-profile-access { margin: 0; padding-left: 18px; list-style: disc; }
.itit-profile-access > li { margin: 4px 0; }
.itit-access-tick { color: #2a8a2a; font-weight: 700; }
.itit-profile-section .itit-intro-request { margin-top: 8px; } /* "Request introduction" (not introduced yet) */
.itit-intro-status { margin: 8px 0 0 !important; }
.itit-profile-instant { margin: 2px 0 4px; padding-left: 16px; list-style-type: '–  '; }
.itit-profile-instant li { margin: 2px 0; }
.itit-profile-item { padding: 0; background: none; border: 0; color: #0073aa; font: inherit; text-align: left; cursor: pointer; }
.itit-profile-item:hover { text-decoration: underline; }
/* Lab emails (lab managers, 2026-10-10): a tick box per kind, its name, and what it is under it */
.itit-notify-group { margin: 14px 0 4px; font-size: 13px; }
.itit-notify-option { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; }
.itit-notify-option input { flex: none; margin-top: 3px !important; cursor: pointer; }
.itit-notify-option .itit-request-help { display: block; margin: 1px 0 0; }
#itit-notify-form .itit-btn { margin-top: 10px; }
/* Under "Logged in as": their lab access, a line each with a small bullet, in the same small grey; the links underlined */
.itit-me { list-style: disc; margin: 2px 0 12px; padding: 0 0 0 18px; font-size: 13px; line-height: 1.5; color: #555; }
.itit-me li { margin: 0; }
.itit-me a, .itit-me .itit-profile-item { color: #0073aa; text-decoration: underline; }
.itit-profile-fixed { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.itit-profile-fixed dt { color: #777; }
.itit-profile-fixed dd { margin: 0; font-weight: 600; }
.itit-profile .itit-form-group { margin-bottom: 10px; }
.itit-profile .itit-form-group .itit-request-help { display: block; }
.itit-profile-result { margin-left: 10px; font-size: 12px; }
.itit-profile-result.ok { color: #2a7a2a; }
.itit-profile-result.error { color: #a33; }
.itit-profile-lines { list-style: none; margin: 8px 0 0; padding: 0; }
.itit-profile-lines li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-top: 1px solid #eee; }
.itit-profile-line-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #444; }
.itit-profile-line-status .itit-btn { padding: 3px 10px; font-size: 12px; }
.itit-muted-note { color: #888; }

/* Yellow days you can ask about: clickable (askAboutDay in booking.js) */
.flatpickr-day.flatpickr-disabled.itit-day-full.itit-day-askable { cursor: pointer; }
.flatpickr-day.flatpickr-disabled.itit-day-full.itit-day-askable:hover { background: #f5d77a; border-color: #f5d77a; color: #2e2600; }
.itit-day-pick { margin: 0 0 8px; font-size: 12px; }
.itit-day-pick .itit-btn { margin: 6px 6px 0 0; padding: 3px 10px; font-size: 12px; }

/* Booking panel: one narrow column. The start date has the calendar legend beside it; the end date and
   its options take the whole width; start and end times sit side by side. */
.itit-panel-when { margin-bottom: 12px; }

.itit-date-field { width: 100%; box-sizing: border-box; background: #fff; cursor: pointer; }
/* "Choose dates": a box with the days in words (just as wide as they are), how many days beside it; it opens the dates window */
.itit-dates-field { display: inline-flex; flex: none; align-items: center; min-height: 34px; box-sizing: border-box; background: #fff; border: 1px solid #aaa; } /* (the frame) */
.itit-dates-field:focus-within { border-color: #555; }
.itit-dates-box { display: inline-flex; flex: none; align-items: center; gap: 8px; width: auto; min-height: 32px; box-sizing: border-box; margin: 0; padding: 6px 10px;
    background: #fff; border: 0; border-radius: 0; font-family: inherit; font-size: 13px; color: #222; text-align: left; } /* (shows the days: the calendar is above) */
/* ✕ at the right of the days: clears them. Like the window's and the items' ✕: the same grey, no line */
.itit-dates-clear { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; box-sizing: border-box; margin: 0 7px 0 -4px; padding: 0;
    background: none; border: 0; border-radius: 50%; color: #666; font-size: 13px; line-height: 1; cursor: pointer; }
.itit-dates-clear:hover { color: #000; background: none; }
.itit-dates-clear:focus { outline: none; box-shadow: none; }
.itit-dates-clear:focus-visible { background: #f0f0f0; }
.itit-dates-box-icon { flex: none; color: #555; }
.itit-dates-box.is-empty .itit-dates-summary { color: #777; }
.itit-days-count:empty { display: none; }
/* Now (under "Choose dates") and Open-ended (right under Now): no box; the tick, the word and its ? close together */
.itit-when-dates .itit-when-row .itit-now-option, .itit-when-dates .itit-when-row .itit-open-option { gap: 3px; font-size: 13px; color: #222; }
/* Their tick boxes: no black focus ring when clicked (the theme's or the browser's); with the keyboard, a light one */
.itit-when-dates .itit-when-row input[type="checkbox"]:focus { outline: none; box-shadow: none; }
.itit-when-dates .itit-when-row input[type="checkbox"]:focus-visible { outline: 2px solid #c8c8c8; outline-offset: 1px; }
/* Under "Choose dates" (as close as Now and Open-ended are to each other): Now, Open-ended and the days on the
   left, the legend on the right, stacked */
.itit-dates-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; margin-top: -8px; } /* (Now right under the title; the legend level with the bottom of the days) */
.itit-dates-controls { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.itit-main-dates { gap: 6px; margin: 10px 0 8px; } /* the basket's days, under "Your items" (above the first item): like an item's own dates */
.itit-main-dates .itit-dates-box { cursor: default; } /* (chosen in the calendar above) */
.itit-main-dates .itit-days-count { font-size: 12px; }
/* The basket's Pickup time / Return time, under its days: like an item's own hours ("Pickup time [10:00 ▾]") */
.itit-main-times .itit-times-row { gap: 4px 10px; margin: -4px 0 8px; font-size: 12px; color: #222; }
.itit-main-times .itit-time-group { gap: 4px; white-space: nowrap; }
.itit-main-times .itit-time-label { font-size: 12px; font-weight: 400; color: #222; } /* (as an item's own hours) */
.itit-main-times .itit-time-field { width: auto; height: 20px; margin: 1px 0; padding: 0 2px; font-size: 12px; color: #222; background: #fff; border: 1px solid #bbb; border-radius: 3px;
    -webkit-appearance: menulist; appearance: auto; } /* (exactly as an item's own hours: .itit-units-select, the browser's own dropdown) */
.itit-main-times:empty { display: none; }
/* Choosing one item's own dates: the basket's hours dimmed too, and that item's dates frame closer to the basket's */
.itit-panel-items.is-choosing .itit-main-times { opacity: .4; pointer-events: none; }
.itit-panel-items.is-choosing .itit-main-times .itit-times-row { margin-bottom: 2px; }
.itit-items-choosing:empty { display: none; }
#itit-panel-items.is-choosing .itit-items-choosing li { padding-top: 2px; } /* (right under "Your items": no line above it) */
.itit-main-dates.is-dimmed { opacity: .4; pointer-events: none; }
.itit-dates-top .itit-dd-legend { flex: 0 0 100%; box-sizing: border-box; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2px 14px; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid #bbb; /* (the same line as above "Your items") */ font-size: 12px; line-height: 1.45; color: #555; } /* (like the notes under the calendar) */
.itit-dates-top .itit-dd-legend span { gap: 5px; }
.itit-dates-top .itit-dd-key { width: 9px; height: 9px; }
.itit-when-dates .itit-when-row .itit-now-option + .itit-help, .itit-when-dates .itit-when-row .itit-open-option + .itit-help { margin-left: -5px; }
.itit-now-option + .itit-help { top: -1.5px; box-sizing: border-box; padding-top: 1px; } /* (Now's circle 1.5px higher, its ? 1px: level with the word, as Open-ended's) */
.itit-open-option + .itit-help { top: -1px; box-sizing: border-box; padding-top: 1px; } /* (the circle 1px higher, its ? half a pixel) */
.itit-now-time { margin-left: -4px; font-size: 13px; font-weight: normal; color: #222; } /* "Pickup time: 14:32", beside Now, in Now's style */
.itit-now-time:empty { display: none; }
/* The times, at the end, above the Request button */
.itit-times-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 12px; }
.itit-time-group { display: inline-flex; align-items: center; gap: 8px; }
.itit-time-label { font-size: 12px; font-weight: 600; color: #333; }
/* Under the dates: whether it's available (or who has what), in bold coloured text, a line each; then what it means and the
   notes (not bold), each on its own line. */
.itit-avail-line { margin: 4px 0 0; font-size: 12px; }
.itit-avail-line:not(:has(> span:not([style*="none"]))) { display: none; }
.itit-avail-line .itit-availability-check { display: block; margin: 0; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; }
.itit-avail-line .itit-dates-note { display: block; }
.itit-avail-more { display: block; margin-top: 2px; font-weight: 400; color: #444; }
.itit-avail-item { font-weight: 400; color: #333; } /* "–  Multichannel audio player: Mário Silva" */
.itit-avail-row  { display: block; } /* a line each */
.itit-avail-gap  { margin-top: 8px; } /* "Already booked:" after the available ones */
.itit-avail-ok   { color: #1f7a1f; } /* "Available:" and its items */
.itit-avail-icon { vertical-align: -2px; } /* How it works' icons in a line of text: the clock (needs approval), the Sharing icon (ask to share?) */
.itit-avail-busy { color: #b07d00; } /* "Already booked:" and its items (a yellowish orange) */
.itit-share-ask { margin-top: 8px; } /* (2026-10-11: no longer shown; the sharing sentence is under the return line) */
.itit-share-star { margin: 0; font-size: 12px; line-height: 1.45; color: #555; }
.itit-pickup-note { margin: 10px 0 8px; }
.itit-pickup-part { display: flex; align-items: flex-start; gap: 8px; } /* (2026-10-11) its icon on the left (as How it works'), the text to its right */
.itit-pickup-part + .itit-pickup-part { margin-top: 6px; }
.itit-pickup-icon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: #555; } /* (like the * note: "You'll be told when they're ready on the pickup day. Bring them back…") */
#itit-booking-panel:not(.itit-multi) .itit-pickup-note, .itit-pickup-note:empty { display: none; } /* (only the request window) */
.itit-share-ask[hidden] { display: none; }
.itit-share-note { margin-top: 4px; } /* "Note to Mário Silva (optional)": the same field as "Notes for the lab manager" (.itit-form-group) */
.itit-share-note[hidden] { display: none; } /* after "Mário Silva has it booked on these days.": what happens next */
@media ( max-width: 640px ) {
    .itit-booking-panel-inner { padding: 14px; width: calc(100% - 16px); }
}

/* Calendar colours (legend above it): green = available, yellow = booked but you can ask to use it at the
   same time (click it), red ✕ = blocked (research line). The days you pick are solid green. */
.flatpickr-day.itit-day-free { background: #bfe8b4; border-color: #bfe8b4; color: #155215; }
.flatpickr-day.itit-day-free:hover { background: #9fdb92; border-color: #9fdb92; }
.flatpickr-day.itit-day-free.inRange { background: #7cc96e; border-color: #7cc96e; box-shadow: -5px 0 0 #7cc96e, 5px 0 0 #7cc96e; color: #0d330d; }
.flatpickr-day.itit-day-free.selected, .flatpickr-day.itit-day-free.startRange, .flatpickr-day.itit-day-free.endRange { background: #2a8a2a; border-color: #2a8a2a; color: #fff; }
/* The end calendar: days after the last end that works with the start day. Faded, colours kept, can't be picked. */
.flatpickr-day.itit-day-late, .flatpickr-day.itit-day-late:hover { opacity: .35; cursor: not-allowed; }
/* Today: no circle (flatpickr draws one around it) */
.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) { border-color: transparent; }
.flatpickr-day.flatpickr-disabled.itit-day-locked, .flatpickr-day.flatpickr-disabled.itit-day-locked:hover { background-color: #f6c4be; border-color: #f6c4be; }
.itit-cal-legend { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: 0 0 8px; font-size: 11px; line-height: 1.35; color: #555; }
.itit-fp-legend { justify-content: center; margin: 0; padding: 6px 8px 8px; border-top: 1px solid #eee; background: #fff; }
.itit-cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.itit-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.itit-dot-free { background: #bfe8b4; border: 1px solid #6dbb5f; }
.itit-dot-ask { background: #fbe7a6; border: 1px solid #dfba52; }
.itit-dot-locked { background: #f6c4be; border: 1px solid #d93025; }
/* Just after someone's open-ended hold: "may still be in use". Yellow like a booked day you can ask about (we ask them); still bookable */
.flatpickr-day.itit-day-free.itit-day-maybe:not(.selected):not(.startRange):not(.endRange):not(.inRange) { background: #fbe7a6; border-color: #fbe7a6; color: #4a3d00; }
.flatpickr-day.itit-day-free.itit-day-maybe:not(.selected):not(.startRange):not(.endRange):not(.inRange):hover { background: #f5d77a; border-color: #f5d77a; }
/* Your own booking (used, or still to use): a green ✓ instead of the number, in a green circle outline (also past days). */
.flatpickr-day.itit-day-mine:not(.selected):not(.startRange):not(.endRange):not(.inRange),
.flatpickr-day.itit-day-mine:not(.selected):not(.startRange):not(.endRange):not(.inRange):hover {
    background: none !important; border-color: #2a8a2a !important; color: #2a8a2a !important; font-weight: 700; font-size: 15px;
}
.flatpickr-day.flatpickr-disabled.itit-day-mine { opacity: .75; }
.itit-dot-mine { display: inline-flex; align-items: center; justify-content: center; width: 11px; height: 11px; box-sizing: border-box; border: 1px solid #2a8a2a; border-radius: 50%;
    color: #2a8a2a; font-size: 8px; font-style: normal; font-weight: 700; line-height: 1; } /* a green circle outline with the ✓, like the days */
/* Several items: booked by someone who can be asked to share it. Yellow like a booked day, but it can be picked. */
.flatpickr-day.itit-day-askpick:not(.selected):not(.startRange):not(.endRange):not(.inRange) { background: #fbe7a6; border-color: #fbe7a6; color: #4a3d00; }
.flatpickr-day.itit-day-askpick:not(.selected):not(.startRange):not(.endRange):not(.inRange):hover { background: #f5d77a; border-color: #f5d77a; }
.itit-dates-note { font-size: 12px; font-weight: 400; color: #8a5a00; }

/* Dates and times in a two-cell grid; while an inquiry is open they're greyed out. */
/* Each date with a small time field beside it (the end date also shows the number of days). */
.itit-when-fields { display: flex; flex-direction: column; gap: 8px; }
.itit-when-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.itit-when-row .itit-date-field, .itit-time-field, #itit-booking-form .itit-form-group select { height: 30px; box-sizing: border-box; border: 1px solid #aaa; font-size: 13px; font-family: inherit; outline: none; }
/* Just wide enough for a date like 2026-10-20. */
/* Widths are set by fitDateTimeFields() (booking.js) to fit "2026-10-20" and "10:00"; these are fallbacks. */
.itit-when-row .itit-date-field { flex: none; width: calc(10ch + 14px); padding: 5px 6px; }
#itit-booking-form .itit-form-group select { padding: 0 4px; background: #fff; }
/* Time: our own small arrow, so the field's width is predictable. */
.itit-time-field { width: 66px; flex: none; padding: 0 18px 0 6px; -webkit-appearance: none; appearance: none; cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23555'/%3E%3C/svg%3E") no-repeat right 6px center / 8px 5px; }
.itit-time-field:disabled { background-color: #f2f2f2; }
/* The small "?" next to Open-ended: its text shows straight away on hover (or tap). */
.itit-help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: -4px; flex: none;
    border: 1px solid #888; border-radius: 50%; color: #555; font-size: 10px; font-weight: 700; line-height: 1; cursor: help; outline: none; }
.itit-help::after { content: attr(data-tip); position: absolute; right: -6px; bottom: calc(100% + 6px); width: 210px; padding: 6px 8px; z-index: 6;
    background: #222; color: #fff; font-size: 11px; font-weight: 400; line-height: 1.4; text-align: left; border-radius: 3px;
    opacity: 0; pointer-events: none; transition: opacity .1s; }
.itit-help:hover::after, .itit-help:focus::after { opacity: 1; }
/* The ? next to Now (near the window's top) and next to Open-ended (in the dates window, near its left edge): the text
   opens below (and to the right for Open-ended), so the window's edges don't cut it off */
.itit-now-option + .itit-help::after, .itit-open-option + .itit-help::after { left: -6px; right: auto; top: calc(100% + 6px); bottom: auto; } /* (Now and Open-ended: at the left edge, near the top) */
.itit-when-row .itit-date-field:focus, .itit-time-field:focus { border-color: #555; }
.itit-days-count { font-size: 13px; color: #1f5e1f; font-weight: 600; white-space: nowrap; }
/* "Start" / "End" before the date fields, the same width so the fields line up. */
.itit-row-label { width: 34px; flex: none; font-size: 12px; font-weight: 600; color: #333; }
.itit-when-dates { display: flex; flex-direction: column; gap: 8px; }
.itit-dates-title { margin: 0; } /* "Choose dates", like "Your items" (.itit-suggest-title) */
/* The basket's window (several items): no title, the ✕ on the right */
.itit-multi .itit-panel-top { display: none; }
:is(.itit-multi, .itit-browse-mode) .itit-panel-close-corner { left: auto; right: -10px; z-index: 4; }
/* The request window: "Done" instead of ✕ (closing keeps everything chosen): a word, underlined */
:is(.itit-multi, .itit-browse-mode) .itit-panel-close.itit-panel-close-corner { top: -2px; right: -4px; width: auto; height: auto; padding: 2px 4px; border-radius: 0; background: rgba( 255, 255, 255, .9 ); font-size: 13px; font-weight: 600; line-height: 1.3; color: #222; text-decoration: underline; text-underline-offset: 2px; }
.itit-panel-top { margin-bottom: 12px; }
.itit-panel-top .itit-panel-meta { margin-bottom: 8px; }
/* The picture fills the window's width at its own shape; very tall ones are cropped (top and bottom)
   so the window never gets taller than the screen. No picture: a grey placeholder. */
/* The window's picture: a square (like the cards), sized before it loads so nothing jumps; product shots on white shown whole */
.itit-panel-image { width: 260px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; background: #f4f4f4; border: 1px solid #e0e0e0; overflow: hidden; }
.itit-panel-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.itit-panel-image.itit-on-white { background: #fff; }
.itit-panel-image.itit-on-white img { object-fit: contain; }
.itit-panel-image svg { display: block; width: 100%; height: 100%; }
/* Several photos in an item's window (3.0.0): they slide by every 3 s; ‹ › outside the picture on each side and dots at the
   bottom choose one */
.itit-panel-image { position: relative; }
.itit-panel-image.has-slides { overflow: visible; }
.itit-panel-frame { position: absolute; inset: 0; overflow: hidden; }
.itit-panel-track { display: flex; height: 100%; transition: transform .5s ease; }
.itit-panel-track img { flex: 0 0 100%; }
.itit-panel-track img.itit-on-white { object-fit: contain; background: #fff; }
.itit-panel-image .itit-panel-prev, .itit-panel-image .itit-panel-next { position: absolute; top: 50%; transform: translateY( -50% ); display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; background: #fff; border: 0; border-radius: 50%; box-shadow: 0 0 0 1px #c8c8c8; color: #222; cursor: pointer; }
.itit-panel-image .itit-panel-prev svg, .itit-panel-image .itit-panel-next svg { display: block; width: 18px; height: 18px; }
.itit-panel-image .itit-panel-prev { left: -42px; }
.itit-panel-image .itit-panel-next { right: -42px; }
.itit-panel-image .itit-panel-prev:hover, .itit-panel-image .itit-panel-next:hover { background: #fff; box-shadow: 0 0 0 1px #555; }
.itit-panel-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.itit-panel-dots button { width: 8px; height: 8px; padding: 0; background: rgba( 255, 255, 255, .85 ); border: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba( 0, 0, 0, .3 ); cursor: pointer; }
.itit-panel-dots button.is-on { background: #222; }
@media ( prefers-reduced-motion: reduce ) { .itit-panel-track, .itit-card-track { transition: none; } }
#itit-panel-form-view > .itit-panel-header { margin-bottom: 4px; padding-bottom: 0; border-bottom: 0; }
/* Field names sit inside the fields (placeholders, or a select's empty first choice, shown grey);
   the labels stay for screen readers only. */
.itit-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#itit-booking-form select:invalid { color: #757575; }
#itit-booking-form select option { color: #222; }
/* Only the box and the word are clickable, not the whole line. */
.itit-when-fields .itit-open-ended-option { display: inline-flex; align-items: center; gap: 4px; align-self: center; font-size: 12px; font-weight: normal; margin: 0; cursor: pointer; }
.itit-when-fields .itit-open-ended-option.itit-option-off { opacity: .45; cursor: default; } /* Open-ended off: the start day needs asking (an end date) */
.itit-panel-when.itit-dimmed .itit-when-fields { opacity: .45; }
.itit-panel-when input:disabled, .itit-panel-when select:disabled { background-color: #f2f2f2; cursor: not-allowed; }
.itit-request-close { float: right; background: none; border: none; padding: 0; color: #0066cc; cursor: pointer; text-decoration: underline; font-size: 12px; }

/* ===== Several items at once ("+ Add more items", ITIT_Groups) ===== */
.itit-add-more { display: inline-block; margin: 8px 0 0; padding: 0; background: none; border: 0; color: #0073aa; font-size: 13px; font-weight: 600; cursor: pointer; }
.itit-add-more:hover { text-decoration: underline; }
/* The window for several items ("Choose dates"): no picture, only the Use tab; their list under the dates */
.itit-panel-items:empty { display: none; }
/* "Your items (N)": a line above it and the heading exactly where the calendar's line and title come when it slides
   down (8px under the dates, the 1px line, 10px, then the same heading style) */
.itit-panel-items { margin-top: -2px; padding-top: 4px; border-top: 1px solid #bbb; } /* a line above "Your items", darker than the lines between the items (a little closer to the calendar) */
.itit-suggest-title .itit-title-link { margin-left: 6px; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* "Your items (3) Add items" */
.itit-multi .itit-panel-image, .itit-multi .itit-panel-tab[data-pane="description"], .itit-multi .itit-panel-tab[data-pane="inquire"],
.itit-multi #itit-access-note, .itit-multi #itit-add-more { display: none; }
/* An item's own Use tab (logged in): a line about the basket and "+ Add to basket"; the dates show once the basket is requested */
.itit-use-intro { display: none; }
.itit-browse-mode .itit-use-intro { display: block; margin: 0 0 14px; }
/* ...where "How it works" replaces the note above the dates: always open, the item's own line instead of the general one */
.itit-browse-mode #itit-access-note, .itit-browse-mode .itit-how-approval { display: none; }
/* ...first the lines about you and this item, then the line, then "How it works:" and what's the same for everybody */
.itit-browse-mode .itit-how summary { display: none; }
.itit-how li.itit-how-title { display: none; }
.itit-browse-mode .itit-how li.itit-how-title { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #222; }
/* An item's own window: "This item" and "Your access" right under "Add to basket" (the basket's window has the general
   Approval line and "Your access" in How it works) */
.itit-how-you { display: none; }
.itit-browse-mode .itit-how-you { display: block; order: 1; list-style: none; margin: 0 0 14px; padding: 0; }
.itit-how-you li { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: #222; }
.itit-browse-mode .itit-how li.itit-how-access, .itit-browse-mode .itit-how li.itit-how-sep { display: none; } /* (here: under the button) */
.itit-how-item .itit-how-icon { display: none; }
.itit-how-item[data-state="needs"] .itit-how-icon-clock, .itit-how-item[data-state="ok"] .itit-how-icon-check, .itit-how-item[data-state="tool"] .itit-how-icon-wrench { display: block; }
.itit-browse-mode .itit-how { margin: 0; padding: 0; border: 0; }
.itit-browse-mode .itit-panel-when, .itit-browse-mode #itit-booked-list, .itit-browse-mode #itit-request-box,
.itit-browse-mode .itit-notes-group, .itit-browse-mode .itit-who-fields, .itit-browse-mode .itit-times-row, .itit-browse-mode .itit-form-actions { display: none !important; }
.itit-items-list { list-style: none; margin: 0; padding: 0; } /* (no line above: "Your items (N)" runs straight into "+ Add more items") */
.itit-items-list li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 6px 0; border-bottom: 1px solid #e2e2e2; } /* (the picture level with the top of the name) */
.itit-items-list li > .itit-items-thumb { margin-top: 2px; }
.itit-items-list li > .itit-items-remove, .itit-items-list li > .itit-items-lock { margin-top: -3px; } /* (✕, the lock: level with the name) */
.itit-items-thumb { flex: 0 0 44px; width: 44px; height: 44px; background: #fff; border: 1px solid #e2e2e2; border-radius: 4px; overflow: hidden; }
.itit-items-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The list's last row, shorter than the items' rows: a + where the picture goes, centred on the two lines
   beside it ("Add more items for the same dates", then "Need other days? Make another request.") */
.itit-thumb-blank { display: block; width: 100%; height: 100%; background: #e8e8e8; }
.itit-items-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; }
.itit-items-text strong { font-size: 13px; color: #0073aa; }
.itit-items-model { color: #555; font-weight: 600; }
.itit-items-note { color: #666; }
.itit-items-busy:empty, .itit-items-or:empty { display: none; }
.itit-items-no { color: #a33; font-weight: 600; } /* red dot: "Booked by Rui Martins on these days" */
.itit-items-busy .itit-items-ok { color: #1f5e1f; } /* open-ended: "Available until Wed 21 Oct" */
.itit-items-or { margin-top: 2px; } /* "or [Book separately]", under "End the booking by …" */
/* The calendar's note about this item: "Booked Fri 9 Oct and from Tue 20 Oct. Only one booking can be asked to share: end by …" */
.itit-items-limit { color: #8a5a00; }
.itit-items-access .itit-dd-key, .itit-items-mine .itit-dd-key { width: 10px; height: 10px; margin-right: 1px; vertical-align: -1px; } /* the calendar's colours */
.itit-items-mine .itit-dd-key.is-mine { width: 11px; height: 11px; background: #fff; box-shadow: 0 0 0 1px #8fd17e; color: #1f5e1f; font-size: 8px; } /* "✓ Your booking: Mon 2 Nov → Wed 4 Nov": as the calendar's key and its days of yours (white, a green outline, 2026-10-11) */
.itit-items-mine:empty { display: none; }
.itit-items-line { display: block; } /* a row's lines: what's happening, then its options under it */
.itit-items-busy .itit-share-note { margin: 4px 0 2px; } /* "Note to Mário Silva (required)", under Yes / No */
.itit-items-busy .itit-share-note textarea { font-size: 12px; }
/* The picture and the name open the item's own window ("← Back to basket") */
.itit-items-open { cursor: pointer; }
.itit-items-text .itit-items-name { align-self: flex-start; padding: 0; margin: 0; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.itit-items-text .itit-items-name strong { text-decoration: underline; text-underline-offset: 2px; } /* (always underlined: it opens the item) */
.itit-items-text .itit-items-name:hover strong { color: #005177; }
.itit-items-thumb.itit-items-open:hover { border-color: #444; box-shadow: 0 0 0 1px #444; } /* (darker and thicker, without moving the row) */
/* One item's own dates: in its row, and above the calendar while choosing them (instead of Now, Open-ended and the days) */
.itit-items-own { color: #222; }
.itit-items-intro { margin: 2px 0 6px; font-size: 12px; line-height: 1.45; color: #555; } /* open-ended: "With no end date, you'll get automatic emails…" */
.itit-items-intro:empty { display: none; }
.itit-dates-for { text-decoration: underline; text-underline-offset: 3px; } /* "Choose dates only for the Mac mini" */
.itit-items-ownbox:empty, .itit-own-actions:empty { display: none; }
.itit-own-actions { margin-top: 0; } /* "Confirm or cancel", the last line of the row choosing its own dates: like the rows' other lines (.itit-items-note) */
.itit-own-hint { color: #b03a3a; } /* "Choose your start date" (no days yet): reddish, like what still needs doing */
.itit-items-text .itit-own-confirm:disabled { font-weight: 400; color: #aaa; text-decoration: none; cursor: default; }
.itit-items-list li:has(> .itit-items-ownbox:not(:empty)) { flex-wrap: wrap; row-gap: 0; padding-top: 12px; } /* its own dates: a line across the top of the row (close to it) */
.itit-items-ownbox { flex: 0 0 100%; margin: 0 0 6px; font-size: 12px; color: #222; } /* (6px to its picture and name: the rows' gap is 0 here) */
/* "Its own dates: [📅 Mon 2 Nov → Fri 6 Nov ✕]": the days box above, smaller (✕: back to the basket's dates) */
.itit-own-field.itit-dates-field { min-height: 0; vertical-align: middle; }
.itit-own-field .itit-dates-box { min-height: 0; gap: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.itit-own-field .itit-dates-clear { width: 18px; height: 18px; margin: 0 4px 0 -4px; font-size: 11px; }
.itit-items-own .itit-days-count { margin-left: 6px; font-size: 12px; } /* "5 days" beside its dates frame */
.itit-items-list li.is-dimmed { opacity: .4; } /* the other items, while choosing one item's own dates */
/* The request (3.1, 2026-10-09): every item with its own dates. No shared dates at the top (no "Choose dates", Now,
   Open-ended or legend there; the calendar is in the item choosing its dates). Numbered rows: name · model, its dates
   (one line and "Change", or the From / To grid, its calendar and Done), a trash can to take it out. */
.itit-multi .itit-dates-title, .itit-multi .itit-dates-top, .itit-multi .itit-when-dates > .itit-dates-dialog { display: none; }
.itit-multi #itit-times-home { display: none; } /* (the shared Pickup time / Return time: each item has its own pickup time) */
.itit-items-num { flex: none; align-self: flex-start; width: 12px; margin: 15px -4px 0 0; font-size: 11px; color: #999; text-align: right; } /* (1, 2, 3: in the order added) */
.itit-items-head .itit-items-model { font-weight: 400; color: #666; } /* (name · model on one line) */
.itit-dates-sum { margin: 2px 0 3px; color: #222; }
.itit-dates-fixed { color: #666; }
.itit-items-text .itit-row-link.itit-miss { color: #b0302a; } /* (what's missing: red; a click opens it) */
.itit-dgl { color: #666; }
.itit-dfield { display: inline-flex; align-items: center; box-sizing: border-box; width: auto; white-space: nowrap; background: #fff; border: 1px solid #bbb; border-radius: 3px; } /* (as wide as its day: "Wed 30 Nov ✕") */
.itit-dfield:hover { border-color: #555; }
.itit-dfield.is-empty { border-color: #c0504d; }
.itit-dfield.is-empty .itit-dfield-btn { color: #b0302a; }
.itit-dfield.is-active { border-color: #222; box-shadow: 0 0 0 1px #222; background: #fff; } /* (the day the next click on the calendar chooses) */
.itit-dfield.is-noend { padding: 3px 8px; color: #666; border-color: #ddd; }
.itit-dfield-btn { flex: 1; min-width: 0; padding: 3px 8px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.itit-dfield-x { flex: none; padding: 0 7px 0 2px; background: none; border: 0; font: inherit; color: #666; cursor: pointer; }
.itit-dfield-x:hover { color: #000; }
.itit-dtick { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; cursor: pointer; }
.itit-row-cal .itit-dates-dialog { display: block; margin: 4px 0 2px; }
.itit-row-key.itit-dd-legend { justify-content: center; gap: 2px 14px; margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: #555; } /* its key under it, centred (like .itit-dates-top .itit-dd-legend) */
.itit-row-key.itit-dd-legend span { gap: 5px; }
.itit-items-remove svg { display: block; margin: 0 auto; }
.itit-add-more-line { margin: 8px 0 0; font-size: 12px; }
/* The request window looks like the mockup (2026-10-09): wider, 13px, the names in bold black (they still open the item),
   the status in dark text by its dot, the calendar in a light box with its key, Done and Request as outlined buttons,
   the reason next to Request, both on the right. Only the request window (.itit-multi): an item's own window is as before. */
.itit-multi .itit-booking-panel-inner { max-width: 640px; padding: 20px 22px 22px; border: 0; border-radius: 6px; box-shadow: 0 10px 40px rgba( 0, 0, 0, .25 ); }
.itit-multi .itit-panel-items { margin-top: 0; padding-top: 0; border-top: 0; }
.itit-multi .itit-items-title { margin: -8px 0 10px; font-size: 16px; font-weight: 700; } /* (2026-10-11: level with Close, as the item window's name: measured 8px lower before; its line 2px higher) */
.itit-multi .itit-add-more-line { padding-bottom: 10px; border-bottom: 2px solid #777; } /* (a thick line under "+ Add more items", between parts) */
.itit-multi .itit-items-list { border-top: 2px solid #777; } /* (2026-10-11: as the item window: thick dark lines between parts (under the title), thin light ones between rows) */
#itit-booking-panel.itit-multi .itit-how { border-top: 2px solid #777; } /* (above "How it works") */
.itit-multi .itit-items-list li { gap: 12px; padding: 10px 0; border-bottom-color: #e4e4e4; }
.itit-multi .itit-items-list li > .itit-items-thumb { flex-basis: 46px; width: 46px; height: 46px; margin-top: 3px; border-color: #ddd; border-radius: 3px; } /* (2026-10-11, measured: 1px above the name to the bottom of its dates frame, 48px with its border) */
.itit-multi .itit-items-list li > .itit-items-num { margin-top: 19.3px; } /* (still level with the picture's middle) */
.itit-multi .itit-items-text { font-size: 13px; line-height: 1.4; }
.itit-multi .itit-items-text strong { font-size: 13px; color: #222; }
.itit-multi .itit-items-text .itit-items-name:hover strong { color: #000; } /* (underlined: it opens the item, like the names under Include?) */
.itit-multi .itit-items-access, .itit-multi .itit-items-busy .itit-items-ok { color: #222; }
.itit-multi .itit-items-no { color: inherit; font-weight: 400; } /* "Not available then: …" (the red dot says it) */
.itit-multi .itit-items-then { color: #666; } /* "Then the approval of …", under "Ask … to share?* Yes No" */
.itit-multi .itit-dates-sum { margin: 7px 0 5px; } /* (3px more under the name, 2026-10-11) */
/* From and To on one line (no pickup time), "3 days" after To, then Open-ended; wraps on narrow screens */
.itit-dline { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 8px; margin: 2px 0 6px; padding: 26px 0 6px; font-size: 13px; } /* (centred under the calendar, 2px closer to it; room above it, and between its lines when End wraps under Start, for "Today only?" and Open-ended above the fields: 2026-10-11) */
.itit-dpair { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; white-space: nowrap; } /* "From: [day ✕]": the word close to its field; "To: [day ✕] 3 days ☐ Open-ended (?)" never split */
.itit-dopen { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; } /* "☐ Open-ended (?)": the ? on hover says what it means */
.itit-dopen .itit-help { top: -2px; box-sizing: border-box; width: 15px; height: 15px; padding-top: 2px; margin-left: -4px; } /* (2px higher, 4px from the word; the ? 1px lower in its round circle, as Open-ended's ? above did) */
.itit-dopen .itit-help::after { white-space: normal; } /* (its explanation wraps, though its line doesn't) */
#itit-booking-panel .itit-dline .itit-dfield { transform: translateY( -2px ); } /* the day fields 2px higher (level with "From:" / "To:" to the eye) */
#itit-booking-panel .itit-dopen .itit-dtick input { transform: translateY( -1px ); } /* the Open-ended tick 1px higher */
.itit-dline .itit-days-count { margin-left: 6px; color: #666; } /* "4 days" right after End's field (2026-10-11) */
.itit-items-text .itit-row-link.itit-d-just-link { margin-left: 8px; } /* "Today only?" after "No dates yet"'s pencil */
.itit-dstack { position: relative; display: inline-flex; } /* a day field, and under it (out of the line, its width not counted): */
.itit-dunder { position: absolute; bottom: calc( 100% + 9px ); left: 0; line-height: 1.4; white-space: nowrap; } /* (above the field: 7px, the field being 2px higher; 3px higher, 2026-10-11) */
.itit-items-text .itit-dstack .itit-row-link.itit-d-just-link { left: 50%; margin: 0; transform: translateX( -50% ); } /* "Today only?", centred above Start */
.itit-dline .itit-dstack .itit-dopen { bottom: calc( 100% + 7px ); margin-left: 0; } /* Open-ended above End, its tick at the field’s left edge (2px lower than Today only?) */
#itit-booking-panel .itit-dstack .itit-dopen .itit-dtick input { margin-left: 0; }
#itit-booking-panel .itit-dbox.is-empty.itit-own-edit { cursor: pointer; } /* (the whole red frame opens the calendar) */
.itit-dline .itit-dgl { box-sizing: border-box; text-align: right; } /* "From:" / "To:" as wide as each other (alignDateFields), the colons in line */
.itit-dline .itit-dfield-btn { text-align: left; } /* (the fields as wide as each other: the day on the left, ✕ on the right) */
.itit-row-calbox { --itit-cal-bg: #fcfcfb; display: block; margin: 6px 0 8px; padding: 10px 12px 12px; border: 1px solid #ddd; border-radius: 6px; background: #fcfcfb; } /* the calendar, in a light box, its key inside */
.itit-row-calbox .itit-row-cal .itit-dates-dialog { margin: 0; }
.itit-row-calbox .itit-row-key.itit-dd-legend { margin: 8px 0 0; color: #666; }
/* A row choosing its dates: OK in the trash can's place (top right), like the window's Close: a word, underlined */
.itit-items-text .itit-row-link.itit-row-cal-link { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; } /* "⌄ Show calendar": the chevron, then the words (underlined) */
.itit-row-cal-link > span { text-decoration: underline; text-underline-offset: 2px; }
.itit-row-cal-link .itit-row-chev { flex: none; color: #555; }
.itit-items-text .itit-row-cal-line { margin-left: -16px; } /* (its chevron left of the calendar's and the dates' left edge, the words in line with them: 2026-10-11) */
.itit-row-calbox + .itit-row-cal-line { margin-top: -4px; margin-bottom: 2px; } /* ("Hide calendar": close under the calendar) */
.itit-items-text .itit-row-calbox + .itit-row-cal-line { position: relative; z-index: 1; width: max-content; } /* (above the dates' line that rises beside it; only as wide as its words, so "Today only?" stays clickable) */
.itit-row-cal-line + .itit-dline { margin-top: -11px; } /* "Today only?" and Open-ended just below the level of "Hide calendar" (8px lower, 2026-10-11): the dates' line closer to the calendar (2026-10-11) */
.itit-items-text .itit-dates-sum + .itit-row-cal-line { margin-top: -2px; margin-bottom: 4px; } /* (closed rows: "Show calendar" 2px higher, what's under it 2px lower: 2026-10-11) */
li.is-choosing > .itit-items-text { position: relative; } /* (its OK at the bottom right) */
li.is-choosing > .itit-items-text > .itit-items-note { padding-right: 44px; } /* (the status wraps before OK) */
#itit-booking-panel .itit-row-ok { position: absolute; right: 0; bottom: 0; margin: 0; padding: 0; background: none; border: 0; color: #222; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* OK, like Close (underlined, no button), under the calendar's right edge, level with the status's last line */
#itit-booking-panel .itit-row-ok:hover { color: #000; background: none; }
.itit-row-cal-link:hover .itit-row-chev { color: #000; }
.itit-items-text .itit-items-name.is-still { cursor: default; } /* (its calendar open: the name does nothing, not underlined) */
.itit-items-text .itit-items-name.is-still strong, .itit-multi .itit-items-text .itit-items-name.is-still:hover strong { text-decoration: none; color: inherit; }
/* Its dates as one line, in a frame like the From / To fields (.itit-dfield), its days count inside; the pencil outside.
   Something missing: a red frame (like an empty field), the red words open it. */
#itit-booking-panel .itit-dbox { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; max-width: 100%; margin: 0; padding: 3px 8px; background: #fff; border: 1px solid #bbb; border-radius: 3px; box-shadow: none; font: inherit; color: #222; text-align: left; text-transform: none; letter-spacing: normal; vertical-align: middle; cursor: pointer; } /* (#itit-booking-panel: the site theme's button style doesn't reach it) */
#itit-booking-panel .itit-dbox:hover, #itit-booking-panel .itit-dbox:focus { border-color: #555; background: #fff; color: #222; }
#itit-booking-panel .itit-dbox.is-empty { border-color: #c0504d; cursor: default; }
#itit-booking-panel .itit-dbox-x { flex: none; margin: 0 -3px 0 2px; padding: 0 3px; background: none; border: 0; font: inherit; color: #666; line-height: 1; cursor: pointer; } /* ✕ after the last date, inside its frame: back to "No dates yet" (2026-10-11) */
#itit-booking-panel .itit-dbox-x:hover { color: #000; background: none; }
.itit-dates-sum .itit-row-days { margin-left: 8px; color: #666; font-weight: 600; vertical-align: middle; } /* "4 days" between a row's dates frame and its pencil (2026-10-11) */
#itit-booking-panel .itit-items-text .itit-row-days + .itit-dates-pencil { margin-left: 3px; } /* (its pencil close after the days) */
#itit-booking-panel .itit-items-text .itit-dates-pencil .itit-pencil { position: relative; top: -2px; } /* (the rows' pencils 2px higher, 2026-10-11) */
.itit-dbox-icon { flex: none; color: #666; } /* (the calendar, before the first day) */
#itit-booking-panel .itit-items-text .itit-dates-pencil { margin-left: 7px; text-decoration: none; vertical-align: middle; } /* (a little away from the frame; #itit-booking-panel: the theme's button margins don't reach it) */
.itit-dates-pencil .itit-pencil { display: block; width: 16px; height: 16px; color: #666; } /* (a little bigger than 14px, 2026-10-11) */
.itit-dates-pencil:hover .itit-pencil, .itit-dates-sum:has(.itit-dbox:hover) .itit-pencil { color: #000; }
.itit-take-out .itit-trash { margin-left: 3px; vertical-align: -2px; } /* "remove this item 🗑": the row's trash can, smaller */
.itit-share-said .itit-share-edit { margin-left: 4px; text-decoration: none; } /* "Note to Ana (sent with your request): "…" ✎" */
.itit-share-said .itit-pencil { vertical-align: -2px; color: #666; }
.itit-share-said .itit-share-edit:hover .itit-pencil { color: #000; }
.itit-multi .itit-add-more-line { margin: 10px 0 0; font-size: 13px; }
.itit-multi .itit-add-more-line .itit-add-more { margin: 0; color: #222; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* (bold, 2026-10-10) */
.itit-multi .itit-items-list:has(> li[data-id]) + .itit-add-more-line { padding-left: 20px; } /* (2026-10-11: under the rows' pictures, their left side: the number's 12px - 4px + the row's 12px gap) */
.itit-multi .itit-row-suggest .itit-suggest-title { font-size: 13px; font-weight: 400; } /* ("Include?" in a row: not bold, 2026-10-11) */
.itit-multi .itit-row-suggest .itit-suggest-open, .itit-multi .itit-row-suggest .itit-suggest-choose { color: #222; font-size: 13px; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; } /* (they open the item: underlined) */
.itit-multi .itit-row-suggest .itit-items-thumb { flex-basis: 26px; width: 26px; height: 26px; border-radius: 2px; }
.itit-multi .itit-avail-line { display: none; } /* (the reason next to Request says what's missing) */
.itit-multi .itit-submit-why { margin: 0; font-size: 13px; }
.itit-multi #itit-submit-btn { padding: 7px 16px; background: #fff; border: 2px solid #222; border-radius: 3px; color: #222; font-size: 13px; font-weight: 600; }
.itit-multi #itit-submit-btn:disabled { color: #aaa; cursor: default; }
/* "Include?" in a row, under its status (the item window's "Include?" style): a tick, a small picture, name · model */
.itit-suggest.itit-row-suggest { display: block; margin: 6px 0 2px; }
.itit-row-suggest .itit-suggest-title { display: block; margin: 1px 0 2px; font-size: 12px; } /* ("Include?" in a row: 1px lower, closer to its items, 2026-10-11) */
.itit-row-suggest .itit-suggest-row { margin: 3px 0; }
#itit-booking-panel .itit-row-suggest .itit-suggest-toggle { display: inline-flex; align-items: center; gap: 2px; width: max-content; margin-left: -16px; padding: 0; background: none; border: 0; border-radius: 0; color: #222; font: inherit; cursor: pointer; } /* "⌃ Include?": folds its suggestions (open at first), its chevron outside, as Show / Hide calendar's (2026-10-11) */
#itit-booking-panel .itit-row-suggest .itit-suggest-toggle .itit-row-chev { flex: none; color: #555; }
#itit-booking-panel .itit-row-suggest .itit-suggest-toggle:hover .itit-row-chev { color: #000; }
.itit-row-suggest.is-shut > :not(.itit-suggest-toggle) { display: none; }
.itit-row-suggest .itit-items-thumb { flex: 0 0 34px; width: 34px; height: 34px; }
.itit-row-suggest .itit-suggest-name { flex: 1; min-width: 0; }
.itit-row-suggest .itit-items-model { font-weight: 400; color: #666; } /* (like the row's own name · model) */
.itit-row-suggest .itit-suggest-choices:not([hidden]) { display: block; }
/* The window scrolls, without the scroll bar on its right */
.itit-booking-panel-inner { scrollbar-width: none; -ms-overflow-style: none; }
.itit-booking-panel-inner::-webkit-scrollbar { display: none; }
/* (a small dot looks paler than a day's circle: a deeper shade of the same colours, so they look as vivid) */
.itit-items-access .itit-dd-key.is-free { background: #8fd17e; }
.itit-items-access .itit-dd-key.is-ask { background: #f2cd55; }
.itit-items-access .itit-dd-key.is-no { background: #ec8c86; }
.itit-items-limit:empty { display: none; }
.itit-multi #itit-how-item { display: none; } /* (each row says who confirms it) */
.itit-book-later { padding: 1px 8px; background: #fff; border: 1.5px solid #bbb; border-radius: 3px; color: #444; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.itit-book-later:hover { background: #f0f0f0; }
/* In the rows: Yes / No, Book separately, Put it back: words underlined, in the row's own letters (the chosen one in bold) */
.itit-items-text .itit-row-link { padding: 0; margin: 0; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.itit-items-text .itit-row-link:hover { color: #000; background: none; }
.itit-items-text .itit-row-link.is-chosen { font-weight: 700; text-decoration: none; }
/* A choice made (bold): the other options on its line dimmed, back on hover (Yes / No, OK? Yes / No, I understand / I'm a member,
   change its dates while they're open / book just 1, remove this item) */
.itit-items-text :has(> .itit-row-link.is-chosen) > .itit-row-link:not(.is-chosen):is(.itit-share-yes, .itit-share-no, .itit-until-yes, .itit-until-no, .itit-go-profile, .itit-take-out, .itit-units-fit) { color: #aaa; }
.itit-items-text :has(> .itit-row-link.is-chosen) > .itit-row-link:not(.is-chosen):is(.itit-share-yes, .itit-share-no, .itit-until-yes, .itit-until-no, .itit-go-profile, .itit-take-out, .itit-units-fit):hover { color: #222; }
#itit-booking-panel .itit-items-text .itit-sep { margin: 0; color: #888; } /* "Yes · No": just a space on each side */
#itit-booking-panel .itit-items-text :is(.itit-share-yes, .itit-until-yes) { margin-left: 4px; } /* (Yes a little away from the question) */
.itit-items-x { color: #666; }
.itit-submit-why { margin-left: 10px; font-size: 12px; color: #b03a3a; } /* next to Request: only the times are missing ("Choose the return time above") */
.itit-submit-why:empty { display: none; }
.itit-items-req svg { vertical-align: -1px; } /* "🔒 Required with the Mac mini" */
.itit-units-select { height: 20px; margin: 1px 0; padding: 0 2px; font: inherit; font-size: 12px; color: #222; background: #fff; border: 1px solid #bbb; border-radius: 3px; cursor: pointer; } /* "Units: [2 ▾] of 3" */ /* a row kept for other dates: ✕ instead of the coloured dot */
.itit-switch { margin-left: 4px; padding: 1px 8px; background: #fff; border: 1.5px solid #2a8a2a; border-radius: 3px; color: #1f6b1f; font-size: 12px; font-weight: 600; cursor: pointer; }
.itit-switch:hover { background: #e2f0e2; }
.itit-switch-offer { display: block; margin-top: 3px; color: #1f6b1f; } /* required items: another model free on these days */
.itit-ask-asked { color: #8a5a00; }
.itit-items-remove { flex: 0 0 auto; width: 26px; height: 26px; box-sizing: border-box; padding: 0; background: none; border: 0; border-radius: 50%; color: #666; font-size: 15px; line-height: 1; cursor: pointer; } /* like the window's ✕: the same grey, no line */
.itit-items-remove:hover { color: #000; background: none; }
.itit-own-time-label { margin-right: 10px; white-space: nowrap; } /* an item's own hours: "Pickup time [10:00 ▾]" */
.itit-own-hours { margin: 4px 0 0; } /* its hours, under its dates frame */
/* After sending: "You requested 8 items:", a line per item (as in the rows), then what happens next */
.itit-result-head, .itit-result-line, .itit-result-foot { display: block; }
.itit-result-head { margin-bottom: 6px; font-weight: 600; }
.itit-result-line { margin: 2px 0; }
.itit-result-line .itit-dd-key { width: 10px; height: 10px; vertical-align: -1px; }
.itit-result-line .itit-dd-key.is-free { background: #8fd17e; }
.itit-result-line .itit-dd-key.is-ask { background: #f2cd55; }
.itit-result-line .itit-dd-key.is-no { background: #ec8c86; }
.itit-result-when { font-weight: 400; color: #555; }
.itit-result-foot { margin-top: 8px; }
.itit-items-remove:focus { outline: none; box-shadow: none; }
.itit-items-remove:focus-visible { background: #f0f0f0; }

/* The basket (above Grid | List): tags with ✕, the days if known, "Clear all", "Request N items"; it stays at the top while scrolling */
/* A soft green (the green of the ✓ on items in it): paler while empty; the tags and buttons inside stay white */
.itit-basket { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 900px; box-sizing: border-box; margin: 0 0 10px; padding: 12px 12px;
    background: #fffbea; border: 1.5px solid #222; border-radius: 6px; box-shadow: none; font-size: 12px; color: #555; cursor: pointer; } /* (2026-10-11: the request rows' light yellow, a black outline, gentle corners as the pictures') */ /* the green and thickness of the + circles; (2026-10-11) the same colour empty or not, square corners; it opens the request either way */
.itit-basket { position: sticky; top: var( --wp-admin--admin-bar--height, 0px ); z-index: 50; } /* stays at the top while scrolling, empty or not */
.itit-basket.has-items { background: #fffbea; box-shadow: none; } /* (the same empty or not) */
.itit-basket [hidden] { display: none !important; }
.itit-basket-clear { padding: 0; background: none; border: 0; color: #555; font-size: 12px; text-decoration: underline; cursor: pointer; }
.itit-basket-clear:hover { color: #000; }
.itit-basket-tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.itit-basket-tag { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 9px; background: #fff; border: 1.75px solid #2a8a2a; border-radius: 14px; font-size: 12px; color: #222; } /* green outline */
.itit-basket-remove, .itit-basket-forget { width: 20px; height: 20px; padding: 0; background: none; border: 0; border-radius: 50%; color: #888; font-size: 11px; line-height: 20px; cursor: pointer; }
.itit-basket-remove:hover, .itit-basket-forget:hover { background: #222; color: #fff; }
/* Required items (3.0.0): needed with another item in the basket, a lock instead of ✕ */
.itit-basket-lock { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #999; cursor: help; }
.itit-items-lock { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: #999; cursor: help; }
.itit-basket-days { white-space: nowrap; border-radius: 0; } /* like the items' tags (.itit-basket-tag), but with square corners */
.itit-basket-days:empty { display: none; }
.itit-basket-side { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } /* "Clear all" and "Request N items", the days under them */
.itit-basket-actions { display: flex; align-items: center; gap: 10px; }
.itit-basket-note { flex-basis: 100%; font-size: 12px; color: #2a8a2a; }
.itit-basket-note:empty { display: none; }
/* The + on cards and rows (logged in: add to the basket): a green ✓ once the item is in it */
.itit-open-item .itit-ico-check { display: none; }
.itit-open-item.is-in { color: #2a8a2a; }
.itit-open-item.is-in .itit-ico-plus { display: inline; } /* (2026-10-10: in the request, still the +, white on green; no ✓) */
.itit-open-item.is-in .itit-ico-check { display: none; }
.itit-open-item.is-in:hover, .itit-open-item.is-in:focus-visible { color: #fff; background: #2a8a2a; border-color: #2a8a2a; }
.itit-basket-hand svg { width: 17px; height: 17px; vertical-align: -4px; margin: 0 1px; color: #222; }
.itit-toolbar .itit-view-switch { margin-left: auto; } /* Grid | List at the right end */

/* My Bookings: items booked together, each with its own status and buttons */
.itit-booking-group .itit-booking-info { flex: 1; min-width: 0; }
.itit-group-items { list-style: none; margin: 6px 0 0; padding: 0; }
.itit-group-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0; padding: 6px 0; border-top: 1px solid #eee; }
.itit-group-item-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; }
.itit-group-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* "How it works" at the bottom of the Use tab (open in an item's own window, folded in the basket's) */
.itit-how { margin: 12px 0 0; padding-top: 8px; border-top: 1px solid #e2e2e2; }
.itit-how summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #222; }
.itit-how-heading { display: inline; margin: 0; } /* "How it works", like "Your items" (.itit-suggest-title), next to the arrow */
/* each line: a small line icon (like the list's hand / ? / +), then the text */
.itit-how ul { list-style: none; margin: 6px 0 0; padding: 0; }
/* 12px, dark, not bold (the title above is bold) */
.itit-how li { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 400; line-height: 1.5; color: #222; }
.itit-how-label { font-weight: 600; } /* "One request:", "Sharing:", "Your responsibility:"… in bold */
.itit-how-icon { flex: 0 0 17px; margin-top: 1px; color: #555; }
.itit-how li.itit-how-sep { display: block; height: 0; margin: 10px 0; border-top: 1px solid #e2e2e2; } /* between "you and this item" and "everybody" */

/* An item's own window: its name centred under the square picture (the tabs and the rest on the left) */
#itit-booking-panel:not(.itit-multi) .itit-panel-title { text-align: center; padding: 0 30px; }
.itit-multi #itit-pane-description { display: none; } /* the basket's window: only the Use tab, and only its height */

#itit-add-more .itit-basket-hand svg { width: 19px; height: 19px; vertical-align: -5px; margin: 0 2px 0 -2px; } /* the ✓ in a circle in "Include" */
/* The + in the list and in the empty basket's sentence: green lines too */
#itit-equipment-table .itit-open-item[data-pane="use"] { color: #2a8a2a; }
#itit-equipment-table .itit-open-item[data-pane="use"]:hover:not(.is-in), #itit-equipment-table .itit-open-item[data-pane="use"]:focus-visible:not(.is-in) { color: #2a8a2a; background: #e2f0e2; border-color: #e2f0e2; }
.itit-basket-empty { font-size: 14px; } /* "Empty basket: Add to basket to collect items to use." a little bigger than the basket's 12px */
/* The basket at the top of the left bar, above the categories (the bar stays in view): the same box, in one column —
   the icon, the items one under the other, the days, then "Request N items" across and "Clear all" under it */
.itit-browse-side .itit-basket { position: static; max-width: none; flex-direction: column; align-items: stretch; gap: 8px; margin: 0 0 16px; padding: 8px; }
.itit-basket-head { display: flex; align-items: center; gap: 6px; } /* the icon, "Your basket" at its right */
.itit-basket-head .itit-basket-title { margin: 0; color: #222; }
.itit-browse-side .itit-basket-tags { flex-direction: column; align-items: flex-start; }
.itit-basket-tag .itit-basket-units { height: 18px; margin: 0 0 0 4px; padding: 0 1px; font-size: 11px; } /* "Desktop computer [2 ▾] ✕" */
.itit-browse-side .itit-basket-tag { max-width: 100%; box-sizing: border-box; line-height: 1.2; } /* a name on two lines: the lines close together (not so tall) */
.itit-browse-side .itit-basket-side { margin-left: 0; align-items: stretch; gap: 6px; }
.itit-browse-side .itit-basket-days { align-self: flex-start; order: -1; white-space: normal; } /* (the days above the button) */
.itit-browse-side .itit-basket-actions { flex-direction: column-reverse; align-items: stretch; gap: 6px; }
.itit-browse-side .itit-basket-use { width: 100%; padding: 4px 6px; font-size: 12px; } /* ("Request 120 items" fits on one line in the 170px bar) */
.itit-browse-side .itit-basket-clear { align-self: center; }
.itit-browse-side .itit-basket-empty { font-size: 13px; line-height: 1.4; }
/* The basket's button: "📅 Pick dates ›", then "📅 Check and request ›" (no dates in the bar since 2026-10-10) */
.itit-basket-use { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
/* A word, not a big button (the request window: dates, what's free then, Request) */
.itit-basket .itit-basket-use.itit-btn { padding: 0; background: none; border: 0; font-size: 12px; font-weight: 600; color: #1f5e1f; text-decoration: underline; text-underline-offset: 2px; }
.itit-basket .itit-basket-use.itit-btn:hover { background: none; color: #000; }
.itit-basket-use-icon { flex: none; }
.itit-basket-tag { padding-top: 3px; padding-bottom: 1px; }
/* (2026-10-11) A pill's dot, once its item has dates: how it is then (the calendar's colours); none without dates */
.itit-basket-tag .itit-basket-dot { display: none; flex: none; width: 8px; height: 8px; margin-right: 5px; position: relative; top: -1px; }
.itit-basket-tag .itit-basket-dot[class*="is-"] { display: inline-block; }
.itit-basket-tag .itit-basket-dot.is-free { background: #8fd17e; }
.itit-basket-tag .itit-basket-dot.is-ask { background: #f2cd55; }
.itit-basket-tag .itit-basket-dot.is-no { background: #ec8c86; } /* (the names 1px lower: centred in their pills) */
.itit-basket-tag .itit-basket-remove, .itit-basket-tag .itit-basket-lock { position: relative; top: -1px; } /* (✕ and the lock: back up, level with the names) */
#itit-basket.has-items, #itit-basket.has-items .itit-basket-tag { cursor: pointer; } /* (2026-10-11: the whole bar opens the request; a pill, its item) */
#itit-basket.has-items .itit-basket-tag:hover { border-color: #2a8a2a; }
/* (2026-10-11) What a click opens, underlined: a pill's name (not on its ✕ or units), else "Your request" (anywhere else on the bar) */
#itit-basket.has-items .itit-basket-tag:hover:not(:has(.itit-basket-remove:hover, select:hover, .itit-basket-lock:hover)) .itit-basket-name { text-decoration: underline; }
#itit-basket .itit-basket-title-words { text-decoration: underline; text-underline-offset: 3px; } /* (only the words, not the count or the arrow) */
.itit-items-empty { margin: 0 0 10px; padding: 10px 0; font-size: 13px; color: #555; border-bottom: 1px solid #e4e4e4; } /* (a line under it, as under a row) */
.itit-add-how { display: block; margin: 2px 0 0; font-size: 13px; color: #555; } /* (empty: how to add items, under "+ Add items") */
.itit-items-list li.has-added { flex-wrap: wrap; } /* "Added to your request", small, above the row's picture (after Pick dates) */
.itit-items-added { flex: 0 0 100%; margin: 0 0 -6px; font-size: 11px; color: #555; } /* (2026-10-11: always underlined, touch screens too: it opens the request) */
/* "Clear all" as the request window's trash can, with a balloon at once */
#itit-basket .itit-basket-clear { position: relative; display: inline-flex; align-items: center; padding: 2px; background: none; border: 0; color: #444; cursor: pointer; }
#itit-basket .itit-basket-clear[hidden] { display: none; }
#itit-basket .itit-basket-clear:hover { color: #a33; background: none; }
#itit-basket .itit-basket-clear::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; padding: 4px 8px; background: #222; color: #fff; font-size: 11px; line-height: 1.3; white-space: nowrap; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .08s; }
#itit-basket .itit-basket-clear:hover::after { opacity: 1; }
.itit-basket-head.is-open-able { cursor: pointer; }
.itit-basket-arrow { font-weight: 600; } /* "Your request (3) ›": the bar opens it */
.itit-basket-head { flex-wrap: wrap; }
.itit-basket-hint { display: inline; margin: 0 0 0 4px; font-size: 12px; color: #555; } /* "Next: pick dates": at the right of "Your request (3) ›" (under it only when there's no room) */
.itit-basket-hint[hidden] { display: none; } /* the icon and "Your basket (3)": a click opens it */
.itit-basket-head.is-open-able:hover .itit-basket-title-words { text-decoration: underline; text-underline-offset: 3px; }
.itit-basket-head:focus { outline: none; }
.itit-basket-head:focus-visible .itit-basket-title { text-decoration: underline; }

/* Narrow (under 900px: the plugin in a site's column, phones; .is-narrow, booking.js): the basket as a bar across the
   top that sticks, then the search and Grid | List, the categories as chips (2026-10-08: under the search),
   the cards (the left bar's parts in a new order: display contents) */
.itit-browse.is-narrow { flex-direction: column; align-items: stretch; gap: 0; }
.itit-browse.is-narrow > .itit-browse-side, .itit-browse.is-narrow > .itit-browse-main { display: contents; }
.itit-browse.is-narrow > * > * { order: 6; }
.itit-browse.is-narrow #itit-basket { order: 1; } /* (basket, Search · Grid | List, categories, cards) */
.itit-browse.is-narrow .itit-toolbar { order: 2; }
/* "Categories ▸" (narrow): closed at first, a click opens them (rectangles, barely rounded) */
/* (the same triangle as "How it works": a list item's disclosure marker, before the word; closed ▸, open ▾) */
.itit-browse.is-narrow .itit-category-filters { order: 4; flex-direction: row; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.itit-browse.is-narrow .itit-cat-option { border: 1px solid #ccc; border-radius: 2px; padding: 3px 10px; }
/* One category at a time: no tick boxes (still there for keyboards and screen readers), no counts; the chosen one filled in
   black, as the chosen view (Grid | List) */
.itit-cat-option .itit-cat-check { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.itit-cat-option { position: relative; }
.itit-cat-count { display: none; }
.itit-cat-option.is-checked, .itit-browse.is-narrow .itit-cat-option.is-checked { background: #222; border-color: #222; color: #fff; }
.itit-cat-option:has(.itit-cat-check:focus-visible) { outline: 2px solid #999; outline-offset: 1px; }
.itit-browse.is-narrow .itit-cat-option.is-checked { border-color: #222; }
/* The basket bar (narrow): on the left, "🧺 Your basket (3)  Clear all" and under it the dates button (always there: the
   same height empty or full); on the right, its items, from left to right */
/* The basket bar (narrow): on the left "🧺 Your basket (3)" and under it "📅 Pick dates ›" (the dates: the request window); its
   items in the middle; "Clear all" in the top-right corner; more items, more lines: the rest stays where it is */
.itit-browse.is-narrow .itit-browse-side .itit-basket { position: sticky; top: var( --wp-admin--admin-bar--height, 0px ); z-index: 50; display: grid;
    grid-template-columns: minmax( 0, 1fr ) auto; grid-template-rows: auto auto auto; grid-template-areas: "head clear" "tags tags" "note note"; /* (2026-10-11: the title and Clear all on top, the pills the full width under them) */
    align-items: start; gap: 4px 14px; margin: 0 0 10px; padding: 7px 10px 7px 8px; } /* (2px further left than the rest of the bar) */
.itit-browse.is-narrow .itit-browse-side .itit-basket-head { grid-area: head; min-height: 24px; }
.itit-browse.is-narrow .itit-browse-side .itit-basket-side, .itit-browse.is-narrow .itit-browse-side .itit-basket-actions { display: contents; }
.itit-browse.is-narrow .itit-browse-side .itit-basket-use { grid-area: acts; justify-self: start; white-space: nowrap; } /* (under "Your basket") */
.itit-browse.is-narrow .itit-browse-side .itit-basket-clear { grid-area: clear; justify-self: end; min-height: 24px; white-space: nowrap; } /* (the top-right corner) */
.itit-browse.is-narrow .itit-basket-head { gap: 3px; } /* (the icon and "Your basket" closer) */
.itit-browse.is-narrow .itit-browse-side .itit-basket-tags { grid-area: tags; align-self: start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-left: 0; border-left: 0; }
.itit-browse.is-narrow .itit-browse-side .itit-basket-days { display: none; }
.itit-browse.is-narrow .itit-browse-side .itit-basket-note { grid-area: note; }
.itit-browse.is-narrow .itit-browse-side .itit-basket-empty { align-self: center; min-height: 24px; display: inline-flex; align-items: center; font-size: 12px; }

/* Inside a theme that hides overflow around the page's content (the ITI site's .page-grid), nothing in it can stick:
   the same clipping, but "clip" lets the basket stick (only where the plugin is) */
:is(.page-grid, .page-grid__blocks, .wp-content__container):has(#itit-booking-app) { overflow: clip; }

/* One view, no tabs (trial, 2026-10-05). An item's own window shows everything in one column: Add to basket, the
   description and details, How it works, then Inquire. A request (the basket's window, or one item from it) shows only
   the dates part. (The panes keep their markup; here they just stop being tabs.) */
#itit-booking-panel .itit-panel-tabs { display: none; }
#itit-booking-panel:not(.itit-browse-mode) #itit-pane-description { display: none; }
.itit-browse-mode .itit-panel-panes { display: flex; flex-direction: column; }
.itit-browse-mode .itit-pane { display: contents; visibility: visible; }
.itit-browse-mode .itit-use-intro { order: 1; }
.itit-browse-mode #itit-desc-content { order: 2; }
.itit-browse-mode #itit-line-note { order: 3; margin-top: 12px; }
.itit-browse-mode .itit-how { order: 4; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e2e2e2; }
.itit-browse-mode #itit-inquire-block { order: 5; }
/* The window's lines: thick and black between groups (below), dotted, with spaces between the dots, inside a group
   (details → description text; in the basket's window, your access → how it works) */
.itit-how li.itit-how-sep { border-top: 2px dotted #999; }
.itit-pane-description .itit-desc-row td { border-top: 2px dotted #999; }
/* "Add to basket" and "Request N items": the button's outline in green (the text stays black) */
#itit-add-more.itit-btn-primary, #itit-basket-use.itit-btn-primary { border-color: #2a8a2a; }
#itit-add-more:has( .itit-pick-words ) { display: inline-flex; align-items: center; gap: 7px; } /* (2026-10-11) "📅 Pick dates": the calendar, then the words */
#itit-add-more .itit-dbox-icon { flex: none; color: inherit; }
#itit-add-more .itit-pick-words { position: relative; top: 1px; } /* (1px lower: centred in the button) */

/* Units: a − n + counter (items with several units), in the basket's window list and above the dates for one item */
.itit-units { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 12px; color: #555; }
.itit-units button { width: 22px; height: 22px; padding: 0; background: #fff; border: 1.5px solid #2a8a2a; border-radius: 50%; color: #2a8a2a; font-size: 14px; line-height: 1; cursor: pointer; }
.itit-units button:hover:not(:disabled) { background: #e2f0e2; }
.itit-units button:disabled { border-color: #ccc; color: #bbb; cursor: default; }
.itit-units-n { min-width: 14px; text-align: center; font-size: 13px; font-weight: 600; color: #222; }
.itit-units-of { margin-left: 2px; }
.itit-units-row[hidden] { display: none; }

/* Several units while browsing: "2 units" on cards and in the list; the + shows how many are in the basket
   (the number instead of ✓) and a small + while one more can be added; a − n + counter in the basket's tags
   and next to "Add to basket" */
.itit-card-units { font-size: 11px; line-height: 1.35; color: #666; } /* (the same line spacing as the brand / model above) */
.itit-list-units { margin-left: 4px; font-size: 11px; font-weight: 400; color: #666; }
.itit-equipment-row:hover .itit-list-units { text-decoration: none; }
.itit-ico-count { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; pointer-events: none; }
.itit-open-item.has-count .itit-ico-check { display: none; }
.itit-open-item.has-count .itit-ico-count { display: flex; }
#itit-equipment-table .itit-ico-count { color: #2a8a2a; }
#itit-equipment-table .itit-open-item.has-count:hover .itit-ico-count { color: #fff; }
/* In the list, an item in the basket: the circle filled green, the ✓ (or the number of units) in white;
   on hover the same light green square as the other rows' + */
#itit-equipment-table .itit-open-item.is-in .itit-ico-ring { fill: #2a8a2a; }
#itit-equipment-table .itit-open-item.is-in .itit-ico-check, #itit-equipment-table .itit-open-item.is-in .itit-ico-plus { stroke: #fff; }
#itit-equipment-table .itit-open-item.is-in .itit-ico-count { color: #fff; }
#itit-equipment-table .itit-open-item.is-in:hover, #itit-equipment-table .itit-open-item.is-in:focus-visible { color: #2a8a2a; background: #e2f0e2; border-color: #e2f0e2; }
.itit-open-item.can-add::before { content: '+'; position: absolute; top: 1px; right: 1px; width: 12px; height: 12px; border-radius: 50%; background: #fff;
    border: 1.25px solid #2a8a2a; color: #2a8a2a; font-size: 11px; font-weight: 700; line-height: 11px; text-align: center; box-sizing: border-box; }
#itit-equipment-table .itit-open-item.can-add::before { top: -4px; right: 0; }
.itit-units-mini { margin-left: 4px; gap: 2px; }
.itit-units-mini button { width: 17px; height: 17px; font-size: 12px; border-width: 1.25px; }
.itit-units-mini .itit-units-n { min-width: 10px; font-size: 12px; }
/* "How many units?" above "Add to basket" (items with several units): as "Choose model" and the suggested items */
.itit-panel-units { margin: 0 0 12px; font-size: 12px; color: #222; text-align: left; }
.itit-panel-units:empty, #itit-booking-panel:not(.itit-browse-mode) .itit-panel-units { display: none; }
.itit-browse-mode .itit-panel-units { order: 1; }
.itit-panel-units .itit-units-mini { margin-left: 0; }
.itit-how summary:focus { outline: none; box-shadow: none; }        /* no outline when clicked */
.itit-how summary:focus-visible { text-decoration: underline; }       /* (keyboard: underlined instead) */

/* "Include?" under "Add to basket": suggested items with a tick, categories "choose one" */
.itit-browse-mode #itit-suggest { order: 1; }
.itit-suggest:empty { display: none; }
#itit-booking-panel:not(.itit-browse-mode) #itit-suggest { display: none; } /* (only in an item's own window, not the request's) */
.itit-suggest { margin: 0 0 12px; font-size: 12px; color: #222; }
.itit-suggest-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.itit-suggest-row + .itit-suggest-title, .itit-suggest-choices + .itit-suggest-title { margin-top: 12px; } /* "Include?" after "Needed with it" */
#itit-add-more:disabled { opacity: .55; cursor: default; } /* "Choose the Mac mini first" */
.itit-suggest-row { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.itit-suggest-row input { margin: 0; accent-color: #2a8a2a; }
/* (2026-10-10) Include?: already in your request: a green tick, centred (instead of the box); a group's name above its items */
.itit-already-tick { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 15px; height: 15px; color: #2a8a2a; font-size: 14px; cursor: default; }
.itit-already-tick::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 10; padding: 4px 8px; background: #222; color: #fff; font-size: 11px; line-height: 1.3; white-space: nowrap; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .08s; } /* (as the + buttons' balloons: at once) */
.itit-already-tick:hover::after { opacity: 1; }
/* (2026-10-11) A locked box (always included, or needed by another ticked item): the same balloon, at once, on hover */
.itit-tip-box { position: relative; display: inline-flex; flex: none; }
.itit-tip-box::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 10; padding: 4px 8px; background: #222; color: #fff; font-size: 11px; line-height: 1.3; white-space: nowrap; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .08s; }
.itit-tip-box:hover::after { opacity: 1; }
.itit-suggest-group { margin: 8px 0 4px; font-size: 12px; color: #666; }
#itit-booking-panel .itit-suggest-row input:focus { outline: none; box-shadow: none; } /* a click: no square around the tick (the theme's focus outline) */
#itit-booking-panel .itit-suggest-row input:focus-visible { outline: 2px solid #2a8a2a; outline-offset: 1px; } /* the keyboard: a green ring */
.itit-suggest-open { padding: 0; background: none; border: 0; color: #0073aa; font-size: 12px; text-align: left; cursor: pointer; }
.itit-suggest-open:hover { text-decoration: underline; }
.itit-suggest-choose { padding: 0; background: none; border: 0; color: #2a8a2a; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.itit-suggest-choices { margin: 2px 0 8px 22px; padding: 4px 8px; border-left: 2px solid #b7d8b7; }
.itit-suggest-choices[hidden] { display: none; }
.itit-suggest-choice { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.itit-suggest-choice .itit-items-thumb { flex: 0 0 34px; width: 34px; height: 34px; }
.itit-suggest-choice .itit-suggest-open { flex: 1; }
.itit-suggest-pick { padding: 2px 10px; font-size: 12px; }
/* "← Back to …" at the top of a window opened from another item's suggestions */
.itit-panel-back { display: block; margin: 0 0 8px 28px; padding: 0; background: none; border: 0; color: #0073aa; font-size: 12px; font-weight: 600; cursor: pointer; } /* (28px: right of the ✕ in the corner; bold like Close, 2026-10-11) */
.itit-panel-back[hidden] { display: none; }
.itit-panel-back:hover { text-decoration: underline; }
.itit-suggest-in { color: #888; font-size: 11px; } /* "(in the basket)" */
.itit-suggest-row input:disabled + .itit-suggest-open { color: #888; }
#itit-add-more .itit-basket-hand svg { color: #2a8a2a; } /* the ✓ in "Include": green */

/* Straight lines, thick and black, between the item window's groups: under "Add to basket" (above the details), above
   "How it works", above "Inquire" (dotted lines inside a group) */
.itit-browse-mode #itit-desc-content,
.itit-browse-mode .itit-how,
.itit-inquire-form { border-top: 2px solid #222; }
.itit-browse-mode #itit-desc-content { margin-top: 2px; padding-top: 16px; }
.itit-browse-mode .itit-how { padding-top: 16px; }
.itit-inquire-form { padding-top: 16px; }
.itit-suggest-units { font-size: 12px; font-weight: 600; color: #222; white-space: nowrap; } /* "× 2 units" */

/* Models (3.0.0): one card per item with models; in its window, under the name, "Choose model" and all of them with a round tick,
   on the left (the suggested items' title and rows) */
.itit-model-row { display: none !important; } /* a model's row only holds its details: its main entry's row and card are shown */
.itit-panel-models { margin: 0 0 10px; font-size: 12px; color: #222; text-align: left; }
.itit-panel-models[hidden],
#itit-booking-panel:not(.itit-browse-mode) .itit-panel-models { display: none; } /* (the basket's request window: the model is already chosen) */
.itit-panel-models .itit-suggest-row { cursor: pointer; }
.itit-panel-models .itit-suggest-row input { cursor: pointer; }
.itit-model-units { color: #888; }
.itit-desc-text { white-space: pre-line; } /* a description's line breaks and paragraphs, as typed in the admin */

/* The calendar (openDates in booking.js): slides down under the dates box, inside the request window and as wide as it,
   over the items (and, in the basket's window, the dates stop staying at the top while it's open). Start day first, then the end day.
   One month at a time. Each day: its number in a circle filled with its colour (green available, yellow ask to share,
   red not available, grey not possible with this start day); the legend above. The chosen days: a square behind them,
   also marked as the mouse goes over the days while choosing the end. Weeks start on Monday. */
.itit-dates-dialog { margin-top: -3px; padding-bottom: 0; } /* (no lines above or under the calendar; the months a little closer to the legend above) */
.itit-dd-box { box-sizing: border-box; width: 100%; padding: 0; color: #222; }
.itit-dd-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; font-size: 12px; color: #444; }
.itit-dd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.itit-dd-key { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.itit-dd-months { margin: 2px 0 0; }
/* Two months side by side (wide enough, not phones): tighter columns, smaller circles, no words under the days */
.itit-dd-months.is-two { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); gap: 0 12px; }
.itit-dd-months.is-two .itit-dd-day { min-height: 26px; padding: 1px 0; }
.itit-dd-months.is-two .itit-dd-num { width: 24px; height: 24px; font-size: 13px; }

.itit-dd-head { display: flex; align-items: center; justify-content: space-between; margin: -3px 0 0; } /* (the month and its arrows, a little higher, in line) */
.itit-dd-head strong { font-size: 13px; font-weight: 600; color: #222; } /* "October 2026": like "Choose dates" and "Your items" (.itit-suggest-title) */
.itit-dd-nav { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 1px solid #ccc; border-radius: 50%; background: #fff; color: #333; line-height: 1; cursor: pointer; } /* (the arrow drawn, centred) */
.itit-dd-nav svg { display: block; }
.itit-dd-nav[data-step="-1"] { transform: translateX( -2px ); } /* (each arrow, with its circle, 2px outwards: 2026-10-11) */
.itit-dd-nav[data-step="1"] { transform: translateX( 2px ); }
.itit-dd-nav[data-step="-1"] svg { transform: translateX( -.5px ); } /* (and its chevron half a pixel further out in its circle) */
.itit-dd-nav[data-step="1"] svg { transform: translateX( .5px ); }
.itit-dd-nav:disabled { visibility: hidden; }
.itit-dd-grid { display: grid; grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); gap: 1px 0; }
.itit-dd-wd { margin-bottom: 2px; padding: 3px 0 3px; border-bottom: 1px solid #e6e6e6; font-size: 10px; line-height: 1.2; color: #888; text-align: center; } /* (M T W…: a little smaller, a little lower; a thin line under them, across each month) */
.itit-dd-day { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; min-height: 36px; padding: 2px 2px 1px; border: 0; border-radius: 0; background: none; color: #222; font-family: inherit; cursor: pointer; }
.itit-dd-day:disabled { cursor: default; }
.itit-dd-num { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 30px; height: 30px; padding-top: 2px; border-radius: 50%; font-size: 15px; font-weight: 600; line-height: 1; } /* (the number 1px lower: centred in its circle) */
.itit-dd-cap { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 10px; line-height: 1.2; text-align: center; color: #555; overflow-wrap: anywhere; }
/* the colours (days and legend) */
.itit-dd-day.is-free .itit-dd-num, .itit-dd-key.is-free { background: #b6e3ab; }
.itit-dd-day.is-ask .itit-dd-num, .itit-dd-key.is-ask { background: #f6dc8a; }
.itit-dd-day.is-no .itit-dd-num, .itit-dd-key.is-no { background: #f3b3b0; }
.itit-dd-day.is-ask .itit-dd-cap { color: #7a5a00; }
.itit-dd-day.is-no .itit-dd-cap { color: #a33; } /* (several items: which one isn't available) */
/* Your own booking on a day (2026-10-09): its number, and a small tick in a white circle on the top right corner of its circle,
   a little outside it (above the next day) */
.itit-dd-num { position: relative; }
.itit-dd-mine { position: absolute; top: -5px; right: -6px; display: flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #8fd17e; color: #1f5e1f; font-size: 9px; font-weight: 400; }
.itit-dd-months .itit-dd-day.is-mine { position: relative; z-index: 1; }
.itit-dd-key.is-mine { display: inline-flex; align-items: center; justify-content: center; color: #1f5e1f; font-size: 7px; font-style: normal; font-weight: 700; line-height: 1; }
.itit-dd-day.is-past .itit-dd-num { color: #bbb; font-weight: 400; }
/* the square behind: the mouse over a day, the chosen days, and the days between */
.itit-dd-day.is-range, .itit-dd-day.is-preview { background: #e4f1de; }
/* The chosen pickup and return days (2026-10-09, as in the mockup): a ring on their circle; picked up and back the same
   day: two rings. The green band of the days between reaches the middle of their circles. The day under the mouse: a ring too. */
.itit-dd-months .itit-dd-day.is-start, .itit-dd-months .itit-dd-day.is-end { background: none; }
.itit-dd-months .itit-dd-day.is-start.has-after { background: linear-gradient( to right, transparent 50%, #e4f1de 50% ); }
.itit-dd-months .itit-dd-day.is-end.has-before { background: linear-gradient( to right, #e4f1de 50%, transparent 50% ); }
.itit-dd-day.is-start .itit-dd-num, .itit-dd-day.is-end .itit-dd-num, .itit-dd-day:not(.is-just-picked):hover:not(:disabled) .itit-dd-num { box-shadow: 0 0 0 1.5px #222; }
/* The picked days (2026-10-11: words, not arrows): START / END in their circle, small and centred; picked up and back
   the same day: one ring and SAME DAY, or TODAY ONLY when it's today (hovering: the same words, a little smaller). Those days above their neighbours, so their rings
   aren't covered by the next day. Hovering a day: the word for what a click makes it. */
.itit-dd-months .itit-dd-day.is-start, .itit-dd-months .itit-dd-day.is-end { position: relative; z-index: 2; }
.itit-dd-months .itit-dd-day:not(.is-just-picked):hover:not(:disabled) { position: relative; z-index: 3; }
.itit-dd-months .itit-dd-day.is-start .itit-dd-num, .itit-dd-months .itit-dd-day.is-end .itit-dd-num,
.itit-dd-months .itit-dd-day:not(.is-just-picked):hover:not(:disabled) .itit-dd-num { color: transparent; }
.itit-dd-months .itit-dd-day.is-start .itit-dd-num::after, .itit-dd-months .itit-dd-day.is-end .itit-dd-num::after,
.itit-dd-months .itit-dd-day:not(.is-just-picked):hover:not(:disabled) .itit-dd-num::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1px 0 0; color: #222; font-size: 7.5px; font-weight: 700; line-height: 1.05; letter-spacing: 0; text-align: center; white-space: normal; }
.itit-dd-months.is-two .itit-dd-day .itit-dd-num::after { font-size: 6.5px; } /* (two months: smaller circles) */
.itit-dd-months .itit-dd-day:not(.is-just-picked):hover:not(:disabled) .itit-dd-num::after { font-size: 6.5px; } /* hovering: smaller than a picked day's */
.itit-dd-months.is-two .itit-dd-day:not(.is-just-picked):hover:not(:disabled) .itit-dd-num::after { font-size: 5.5px; }
.itit-dd-months .itit-dd-day.is-start .itit-dd-num::after { content: "START"; }
.itit-dd-months .itit-dd-day.is-end .itit-dd-num::after { content: "END"; }
.itit-dd-months .itit-dd-day.is-start.is-same .itit-dd-num::after { content: "SAME DAY"; }
.itit-dd-months .itit-dd-day.is-start.is-same.is-today .itit-dd-num::after { content: "TODAY ONLY"; }
.itit-dd-months.is-pick-start .itit-dd-day:not(.is-just-picked):hover:not(:disabled) .itit-dd-num::after,
.itit-dd-months.is-pick-end .itit-dd-day.is-before:not(.is-just-picked):hover:not(:disabled) .itit-dd-num::after { content: "START"; } /* (choosing the end, a day before the start would be a new start) */
.itit-dd-months.is-pick-end .itit-dd-day:not(.is-before):not(.is-just-picked):hover:not(:disabled) .itit-dd-num::after { content: "END"; }
/* Hovering the day that makes it the same day (choosing the end: the start; choosing the start: the end): SAME DAY, or TODAY ONLY */
.itit-dd-months.is-pick-end .itit-dd-day.is-start:not(.is-just-picked):hover:not(:disabled) .itit-dd-num::after,
.itit-dd-months.is-pick-start .itit-dd-day.is-end:not(.is-just-picked):hover:not(:disabled) .itit-dd-num::after { content: "SAME DAY"; }
.itit-dd-months.is-pick-end .itit-dd-day.is-start.is-today:not(.is-just-picked):hover:not(:disabled) .itit-dd-num::after,
.itit-dd-months.is-pick-start .itit-dd-day.is-end.is-today:not(.is-just-picked):hover:not(:disabled) .itit-dd-num::after { content: "TODAY ONLY"; }
.itit-extend-cal .itit-dd-num::after { content: none !important; } /* (My Bookings' Extend calendar: numbers only) */
.itit-dd-day.is-fade1 { background: linear-gradient( to right, #e4f1de, rgba( 228, 241, 222, .66 ) ); } /* (Open-ended: after the start, the green fades out over 3 days) */
.itit-dd-day.is-fade2 { background: linear-gradient( to right, rgba( 228, 241, 222, .66 ), rgba( 228, 241, 222, .33 ) ); }
.itit-dd-day.is-fade3 { background: linear-gradient( to right, rgba( 228, 241, 222, .33 ), rgba( 228, 241, 222, 0 ) ); }
@media ( max-width: 480px ) {
    .itit-dd-num { width: 28px; height: 28px; font-size: 14px; }
    .itit-dd-cap { font-size: 9px; }
    .itit-dd-day { min-height: 32px; }
}

/* An item's own window looks like the request window (2026-10-09): 640px wide, the name as the title on the left (its model
   grey) with Close top right and a thin line under it, the photos under it in a thin frame, its status as a row's (a dot and
   who approves it; "Your access" grey), Include? as in the rows (a small picture, name · model in black), "Add to your
   request" outlined in black on the right, the details 13px with grey labels, thin grey lines between the parts. */
#itit-booking-panel.itit-browse-mode .itit-booking-panel-inner { max-width: 640px; padding: 20px 22px 22px; border: 0; border-radius: 6px; box-shadow: 0 10px 40px rgba( 0, 0, 0, .25 ); }
#itit-booking-panel.itit-browse-mode .itit-panel-back { margin: 0 0 10px; color: #222; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; } /* "← Your request" */
#itit-booking-panel.itit-browse-mode .itit-panel-top { display: flex; flex-direction: column; margin-bottom: 12px; }
#itit-booking-panel.itit-browse-mode .itit-panel-title { order: -1; margin: 0 0 14px; padding: 0 60px 10px 0; border-bottom: 2px solid #777; text-align: left; font-size: 16px; font-weight: 700; line-height: 1.3; color: #222; }
.itit-panel-title .itit-panel-model { font-weight: 400; color: #666; }
#itit-booking-panel.itit-browse-mode .itit-panel-image { border-color: #ddd; border-radius: 3px; }
#itit-booking-panel.itit-browse-mode #itit-access-note { display: block; margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: #222; } /* its status */
#itit-booking-panel.itit-browse-mode #itit-access-note .itit-dd-key { width: 10px; height: 10px; margin-right: 1px; vertical-align: -1px; }
.itit-item-yours { color: #666; font-size: 12px; } /* "You're already introduced to the ITI Lab: …" */
#itit-booking-panel.itit-browse-mode .itit-how-you { display: none; } /* (its status says it) */
#itit-booking-panel.itit-browse-mode #itit-suggest, #itit-booking-panel.itit-browse-mode #itit-suggest .itit-suggest-title { font-size: 13px; }
#itit-booking-panel.itit-browse-mode #itit-suggest :is(.itit-suggest-open, .itit-suggest-choose) { color: #222; font-size: 13px; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
#itit-booking-panel.itit-browse-mode #itit-suggest .itit-suggest-open .itit-items-model { display: inline-block; margin-left: .3em; font-weight: 400; color: #666; } /* (inline-block: not underlined) */
#itit-booking-panel.itit-browse-mode #itit-suggest .itit-items-thumb { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 2px; }
#itit-booking-panel.itit-browse-mode .itit-use-intro { text-align: right; }
#itit-booking-panel.itit-browse-mode #itit-add-more { padding: 7px 16px; background: #fff; border: 2px solid #222; border-radius: 3px; color: #222; font-size: 13px; font-weight: 600; } /* like "Request N items" */
#itit-booking-panel.itit-browse-mode #itit-add-more:hover:not(:disabled) { background: #f0f0f0; }
#itit-booking-panel.itit-browse-mode #itit-add-more:disabled { color: #aaa; }
.itit-browse-mode .itit-pane-description .itit-detail-specs td { font-size: 13px; line-height: 1.5; }
.itit-browse-mode .itit-pane-description .itit-detail-specs td:first-child { font-weight: 400; color: #666; }
.itit-browse-mode .itit-pane-description .itit-detail-specs td:last-child { color: #222; }
.itit-browse-mode .itit-pane-description .itit-cat-pill { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: 13px; color: #222; } /* the category as plain text */
.itit-browse-mode .itit-pane-description .itit-cat-pill + .itit-cat-pill::before { content: ', '; }
.itit-browse-mode .itit-pane-description .itit-desc-row td { border-top: 1px solid #e4e4e4; }
.itit-browse-mode #itit-desc-content, .itit-browse-mode .itit-how, .itit-browse-mode .itit-inquire-form { border-top: 2px solid #777; } /* (2026-10-10: the item window's lines between parts: thicker and darker) */
#itit-booking-panel.itit-browse-mode #itit-desc-content { margin-top: 16px; padding-top: 16px; } /* (the line between Description and Reviews: as much space above as below) */
.itit-browse-mode .itit-pane-description .itit-file-button { padding: 0; background: none; border: 0; border-radius: 0; color: #222; font-size: 13px; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; } /* documents: links */
.itit-browse-mode .itit-pane-description .itit-file-button:hover { background: none; color: #000; }


/* The tick (2026-10-09): a plain ✓ of two straight strokes, drawn (booking.js tick()), as big as the text around it */
.itit-tick { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; flex: none; }
.itit-dd-key.is-mine .itit-tick, .itit-dd-num .itit-tick, .itit-dot-mine .itit-tick, .itit-day-mine .itit-tick { vertical-align: middle; }
/* In the calendar's key: the tick bigger than in the rows, to be seen */
.itit-dd-legend .itit-dd-key.is-mine { width: 13px; height: 13px; background: #fff; box-shadow: 0 0 0 1px #8fd17e; color: #1f5e1f; font-size: 9px; } /* the calendar's key: as the tick on a day of yours (white, a green outline) */

/* An item's window, top to bottom (2026-10-09): the title, the photos, Include?, the button; then its status, the research line
   note and the details; then Inquire; How it works last. */
#itit-booking-panel.itit-browse-mode #itit-access-note { order: 2; margin: 0 0 10px; } /* (its status: under the button, not under the photos) */
#itit-booking-panel.itit-browse-mode #itit-line-note { order: 3; margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: #666; }
#itit-booking-panel.itit-browse-mode #itit-desc-content { order: 4; }
#itit-booking-panel.itit-browse-mode #itit-inquire-block { order: 5; }
#itit-booking-panel.itit-browse-mode .itit-how { order: 6; }
#itit-line-note .itit-items-line { display: block; }
#itit-booking-panel #itit-line-note .itit-line-join { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font: inherit; color: #222; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* "I'm a member": underlined, as in the rows */
#itit-booking-panel #itit-line-note .itit-line-join:hover { color: #000; background: none; }
/* Inquire: the field and Send at its right; who it goes to under it, grey */
.itit-inquire-row { display: flex; align-items: flex-start; gap: 10px; }
.itit-inquire-form .itit-inquire-row .itit-inquire-msg { flex: 1; width: auto; min-width: 0; }
#itit-booking-panel .itit-inquire-row .itit-inquire-btn { flex: none; width: auto; height: auto; margin: 0; padding: 7px 16px; background: #fff; border: 2px solid #222; border-radius: 3px; color: #222; font-size: 13px; font-weight: 600; opacity: 1; cursor: pointer; } /* like "Add to your request" */
#itit-booking-panel .itit-inquire-row .itit-inquire-btn:hover:not(:disabled) { background: #f0f0f0; }
#itit-booking-panel .itit-inquire-row .itit-inquire-btn:disabled { color: #aaa; border-color: #ccc; cursor: default; }
.itit-inquire-form .itit-inquire-actions { margin-top: -4px; }

/* The request window (2026-10-09): Request at the right of the notes, as Inquire's Send; what's still missing under it, on the right */
.itit-notes-row { display: flex; align-items: flex-start; gap: 10px; }
.itit-notes-row #itit-notes { flex: 1; min-width: 0; width: auto; }
.itit-multi .itit-notes-row #itit-submit-btn { flex: none; margin: 0; }
.itit-multi .itit-form-actions { flex-direction: row; justify-content: flex-end; align-items: center; margin: 0 0 10px; } /* (only the reason now: under the button, on the right) */
.itit-multi .itit-form-actions .itit-submit-why { text-align: right; font-size: 13px; font-weight: 400; line-height: 1.4; } /* (the same weight as the rest, 2026-10-10) */
@media ( max-width: 480px ) { /* (phones: the button under its field, on the right) */
    .itit-notes-row, .itit-inquire-row { flex-direction: column; align-items: stretch; }
    .itit-multi .itit-notes-row #itit-submit-btn, #itit-booking-panel .itit-inquire-row .itit-inquire-btn { align-self: flex-end; }
}

/* An item's details table (2026-10-09): every row the same, tighter (the description too, no line above it); its name, availability,
   approval, your access and the research line's "I'm a member" are rows of it, so the separate status and line notes go. */
#itit-booking-panel.itit-browse-mode .itit-pane-description .itit-detail-specs td { padding: 2px 14px 2px 0; font-size: 13px; line-height: 1.4; }
#itit-booking-panel.itit-browse-mode .itit-pane-description .itit-detail-specs td:last-child { padding-right: 0; }
#itit-booking-panel.itit-browse-mode .itit-pane-description .itit-desc-row td { padding-top: 2px; border-top: 0; }
#itit-booking-panel.itit-browse-mode .itit-pane-description .itit-desc-row + tr td, #itit-booking-panel.itit-browse-mode .itit-pane-description tr:has( + .itit-desc-row ) td { padding-bottom: 2px; }
#itit-booking-panel.itit-browse-mode .itit-detail-specs .itit-dd-key { width: 10px; height: 10px; margin-right: 2px; vertical-align: -1px; }
#itit-booking-panel.itit-browse-mode .itit-detail-specs .itit-line-join { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font: inherit; color: #222; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#itit-booking-panel.itit-browse-mode #itit-access-note, #itit-booking-panel.itit-browse-mode #itit-line-note { display: none !important; }

/* An item's window in four parts (2026-10-09), thin lines between them: what it is (the photo, the facts beside it), the request
   (Include?, then Pick dates on the right), more about it (the description, the documents), questions and help (Inquire, then
   How it works, folded). */
#itit-booking-panel.itit-browse-mode .itit-panel-top { display: grid; grid-template-columns: 220px minmax( 0, 1fr ); gap: 0 18px; align-items: start; margin: 0 0 4px; padding: 0; border-bottom: 0; } /* (the line under it: Inquire's) */
#itit-booking-panel.itit-browse-mode .itit-panel-top > * { grid-column: 1 / -1; }
#itit-booking-panel.itit-browse-mode .itit-panel-title { grid-row: 1; }

.itit-item-facts:empty { display: none; }
#itit-booking-panel.itit-browse-mode .itit-item-facts .itit-detail-specs { width: 100%; border-collapse: collapse; }
#itit-booking-panel.itit-browse-mode .itit-item-facts .itit-detail-specs td { padding: 2px 14px 2px 0; font-size: 13px; line-height: 1.4; color: #222; vertical-align: top; }
#itit-booking-panel.itit-browse-mode .itit-item-facts .itit-detail-specs td:first-child { width: 1%; font-weight: 400; color: #666; white-space: nowrap; }
#itit-booking-panel.itit-browse-mode .itit-item-facts .itit-detail-specs td:last-child { padding-right: 0; }
#itit-booking-panel.itit-browse-mode .itit-item-facts .itit-cat-pill { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: 13px; color: #222; }
#itit-booking-panel.itit-browse-mode .itit-item-facts .itit-cat-pill + .itit-cat-pill::before { content: ', '; }
#itit-booking-panel.itit-browse-mode .itit-item-facts .itit-dd-key { width: 10px; height: 10px; margin-right: 2px; vertical-align: -1px; }
#itit-booking-panel.itit-browse-mode .itit-item-facts .itit-line-join { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font: inherit; color: #222; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
/* Several photos: one at a time, ‹ › inside its frame (white circles), the dots under it; a click: bigger */

/* The request part: Include?, then Pick dates on the right, under it */
#itit-booking-panel.itit-browse-mode #itit-suggest:empty { display: none; }
#itit-booking-panel.itit-browse-mode .itit-use-intro { margin: 4px 0 14px; }
/* Questions and help: How it works folded, its title as the request window's */
#itit-booking-panel.itit-browse-mode .itit-how summary { display: list-item; }
#itit-booking-panel.itit-browse-mode .itit-how li.itit-how-title { display: none; }
@media ( max-width: 560px ) { /* (phones: the photo, then the facts under it) */
    #itit-booking-panel.itit-browse-mode .itit-panel-top { grid-template-columns: minmax( 0, 1fr ); }

}

/* An item's window, two columns (2026-10-09): on the left the photo (small ‹ • • › under it), its models, Include? and Pick dates
   (on the right, under them); on the right what it is, the description and the documents (they flow down that column). */
#itit-booking-panel.itit-browse-mode .itit-panel-meta { grid-row: 2; }
#itit-booking-panel.itit-browse-mode .itit-panel-meta:empty { display: none; }
#itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-left { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-facts { grid-column: 2; grid-row: 3; }
#itit-booking-panel.itit-browse-mode .itit-item-left .itit-panel-image { width: 100%; margin: 0; }
#itit-booking-panel.itit-browse-mode .itit-item-left .itit-panel-image.has-slides { overflow: hidden; cursor: zoom-in; }
#itit-booking-panel.itit-browse-mode .itit-item-left #itit-suggest, #itit-booking-panel.itit-browse-mode .itit-item-left .itit-panel-models { margin: 0; }
#itit-booking-panel.itit-browse-mode .itit-item-left .itit-use-intro { margin: 0; text-align: center; } /* Pick dates: centred in the left column (2026-10-09) */
#itit-booking-panel.itit-browse-mode .itit-item-left .itit-panel-units:empty { display: none; }
/* ‹ • • • ›: small, under the photo */
.itit-panel-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: -4px; }
.itit-panel-nav:empty { display: none; }
#itit-booking-panel .itit-panel-nav .itit-panel-dots { position: static; display: flex; gap: 5px; }
#itit-booking-panel .itit-panel-nav .itit-panel-dots button { width: 7px; height: 7px; margin: 0; padding: 0; background: #ccc; border: 0; border-radius: 50%; box-shadow: none; }
#itit-booking-panel .itit-panel-nav .itit-panel-dots button.is-on { background: #222; }
#itit-booking-panel .itit-panel-nav :is(.itit-panel-prev, .itit-panel-next) { position: static; transform: none; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: #666; cursor: pointer; }
#itit-booking-panel .itit-panel-nav :is(.itit-panel-prev, .itit-panel-next) svg { width: 14px; height: 14px; }
#itit-booking-panel .itit-panel-nav :is(.itit-panel-prev, .itit-panel-next):hover { color: #000; background: none; }
#itit-booking-panel.itit-browse-mode #itit-desc-content:empty { display: none; }
@media ( max-width: 560px ) { /* (phones: the left column, then what it is under it) */
    #itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-facts { grid-column: 1; grid-row: 4; margin-top: 12px; }
}

/* The facts beside the photo (2026-10-09): two columns, the labels (grey) and their text; the description under its label, the
   column's full width (the table's cells as a grid: the description's two cells take both columns). */
#itit-booking-panel.itit-browse-mode .itit-item-facts { display: grid; grid-template-columns: max-content minmax( 0, 1fr ); gap: 0 14px; align-content: start; } /* (the rows close together, 2026-10-09) */
#itit-booking-panel.itit-browse-mode .itit-item-facts :is(table, tbody, thead, tr) { display: contents; }
#itit-booking-panel.itit-browse-mode .itit-item-facts td { display: block; width: auto; padding: 0; }

/* A description, line by line (2026-10-09): an empty line, a gap; a bullet line indented when it wraps */
.itit-desc-text.is-lines { white-space: normal; }
.itit-desc-line { display: block; }
.itit-desc-line.is-bullet { padding-left: .85em; text-indent: -.85em; }
.itit-desc-gap { display: block; height: .75em; }

/* An item's window (2026-10-09): the left column floats; beside it the facts (a grid of their own), then the description as plain
   text, which flows around the left column and on, the window's full width, under it. */
#itit-booking-panel.itit-browse-mode .itit-panel-top { display: flow-root; } /* (not a grid any more: it holds the float) */
#itit-booking-panel.itit-browse-mode .itit-panel-title { margin-bottom: 14px; }
#itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-left { float: left; width: 220px; margin: 0 18px 12px 0; }
#itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-facts { display: block; align-content: normal; } /* (align-content would make it a box of its own, beside the float: no flowing under it) */
#itit-booking-panel.itit-browse-mode .itit-item-facts > .itit-detail-specs { display: grid; grid-template-columns: max-content minmax( 0, 1fr ); gap: 0 14px; align-content: start; width: auto; } /* (auto: beside the float, in the space left) */
#itit-booking-panel.itit-browse-mode .itit-item-facts { gap: 0; }
.itit-facts-label { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #666; } /* "Description" */
.itit-facts-text { font-size: 13px; line-height: 1.4; color: #222; }
/* In your request: the line, its dates in their frame (as in the request window), then Change dates */
.itit-in-request { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 8px; }
.itit-in-request-line { margin: 0; font-size: 12px; color: #666; }
@media ( max-width: 560px ) { /* (phones: the left column, then the rest under it) */
    #itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-left { float: none; width: auto; margin: 0 0 12px; }
}

/* An item's photos shown whole (on white, smaller than the square): in the middle of it, both ways (2026-10-09; it was the top) */
#itit-booking-panel .itit-panel-image.itit-on-white img, #itit-booking-panel .itit-panel-track img.itit-on-white { object-position: center center; }

/* An item's window (2026-10-09, no more text flowing around the photo): a grid of two columns, the photo (and ‹ • • ›) on the left;
   on the right what it is, its models, Include?, In your request and Pick dates; the description under both, the full width. */
#itit-booking-panel.itit-browse-mode .itit-panel-top { display: grid; grid-template-columns: 220px minmax( 0, 1fr ); gap: 0 18px; align-items: start; }
#itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-left { float: none; grid-column: 1; grid-row: 3; width: auto; margin: 0; }
#itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-right { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
#itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-desc { grid-column: 1 / -1; grid-row: 5; margin-top: 14px; }
/* (2026-10-11) Included / Include?: their own part under the picture and the details, the full width, a thick line above;
   its items in two columns (one when there's no room), the titles and a group's name across both */
#itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-include { grid-column: 1 / -1; grid-row: 4; margin-top: 16px; padding-top: 16px; border-top: 2px solid #777; } /* (2026-10-11: "Included" / "Include?" as far under the thick line as Description and Reviews: 16px) */
.itit-item-include:has( > #itit-suggest:empty ) { display: none; }
.itit-item-desc:empty { display: none; }
#itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-desc { margin-top: 16px; padding-top: 16px; border-top: 2px solid #777; }
#itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-include:not(:has( > #itit-suggest:empty )) + .itit-item-desc { margin-top: 4px; } /* (2026-10-11: the line under the Include? list closer to its last items, which keep 8px under them) */ /* (2026-10-10: a thick line above the Description too, space centred; restored 2026-10-11) */
.itit-item-desc > .itit-review-title:first-child { margin-top: 0; }
#itit-booking-panel .itit-item-include #itit-suggest { display: block; }
/* Blocks (booking.js): "Included", "Include?", each group; the same space above and under every name; a thin line before "Include?" */
#itit-booking-panel .itit-item-include .itit-suggest-block + .itit-suggest-block { margin-top: 4px; } /* (2026-10-11: the thin line between Included and Include? centred: 12px above it (the last row's 8 + 4), 12px under it) */
#itit-booking-panel .itit-item-include .itit-suggest-block:not(.is-group) + .itit-suggest-block:not(.is-group) { padding-top: 12px; border-top: 1px solid #e4e4e4; } /* ("Include?" closer to its thin line) */
#itit-booking-panel .itit-item-include .itit-suggest-block > :is( .itit-suggest-title, .itit-suggest-group ) { margin: 0 0 4px; line-height: 1.3; } /* (2026-10-11: every name the same, a little closer to its items: measured) */
#itit-booking-panel .itit-item-include .itit-suggest-block > .itit-suggest-title { font-size: 13px; font-weight: 600; color: #222; }
#itit-booking-panel .itit-item-include .itit-suggest-block.is-group > .itit-suggest-group { font-size: 12px; color: #666; }
/* Its rows: two columns read top to bottom (one when there's no room); every row the same shape: the name, the model under it */
#itit-booking-panel .itit-item-include .itit-suggest-cols { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); column-gap: 28px; align-items: start; } /* (2026-10-11: two columns (.itit-suggest-col, booking.js): whole items or whole groups, never split) */
#itit-booking-panel .itit-item-include .itit-suggest-col { min-width: 0; }
@media ( max-width: 560px ) { #itit-booking-panel .itit-item-include .itit-suggest-cols { display: block; } } /* (phones: one column) */

#itit-booking-panel .itit-item-include .itit-suggest-col > .itit-suggest-row { box-sizing: border-box; height: 32px; margin: 0 0 8px; align-items: flex-start; overflow: hidden; } /* (every row the same height: the columns' rows level) */
/* (a long name: cut with …, as the model, so a row never grows: the name and the model each on one line) */
#itit-booking-panel.itit-browse-mode .itit-item-include #itit-suggest .itit-suggest-text .itit-suggest-open { display: flex; flex-direction: column; align-items: stretch; min-width: 0; max-width: 100%; text-decoration: none; }
#itit-booking-panel.itit-browse-mode .itit-item-include #itit-suggest .itit-suggest-nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: underline; }
#itit-booking-panel.itit-browse-mode .itit-item-include #itit-suggest .itit-suggest-open .itit-items-model { display: block; width: auto; } /* (every name at the top of its row, with or without a model under it) */
#itit-booking-panel .itit-item-include .itit-suggest-row > :is( input, .itit-tip-box, .itit-already-tick ) { margin-top: 2px !important; } /* (the box or tick level with the name) */
#itit-booking-panel .itit-item-include .itit-suggest-cols > .itit-suggest-choices { column-span: all; }
#itit-booking-panel .itit-item-include .itit-suggest-col > .itit-suggest-group { display: flex; align-items: flex-end; box-sizing: border-box; height: 36px; margin: 0 0 4px; padding: 0; font-size: 12px; line-height: 1.3; color: #666; break-after: avoid; } /* (2026-10-11: a group's name takes one row's place (36 + 4 = 32 + 8), at its bottom, so the rows of both columns stay level) */ /* (a group's name in the flow: right under the item above it, kept with its first item) */
/* (2026-10-11) The model on its own line under the name, at its left edge and close under it, not underlined (an inline-block the full width) */
#itit-booking-panel.itit-browse-mode .itit-item-include #itit-suggest .itit-suggest-open .itit-items-model { display: inline-block; width: 100%; margin: 0; font-size: 12px; line-height: 1.2; font-weight: 400; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } /* (too long: cut with …, never on two lines) */
#itit-booking-panel.itit-browse-mode .itit-item-include #itit-suggest .itit-suggest-text { min-width: 0; overflow: hidden; }
#itit-booking-panel.itit-browse-mode .itit-item-include #itit-suggest .itit-suggest-open { max-width: 100%; }
#itit-booking-panel.itit-browse-mode .itit-item-include #itit-suggest .itit-items-thumb { flex: 0 0 32px; width: 32px; height: 32px; } /* (as tall as the name and its model) */
#itit-booking-panel.itit-browse-mode .itit-item-include #itit-suggest .itit-suggest-text { line-height: 1.25; }
.itit-item-desc > .itit-review-title:first-child { margin-top: 0; }
.itit-item-desc .itit-facts-label { margin-top: 0; }
#itit-booking-panel.itit-browse-mode .itit-item-right .itit-item-facts { align-self: stretch; }
#itit-booking-panel.itit-browse-mode .itit-item-right :is(#itit-suggest, .itit-panel-models, .itit-panel-units) { margin: 0; }
#itit-booking-panel.itit-browse-mode .itit-item-right .itit-use-intro { margin: 0; text-align: left; }
#itit-booking-panel.itit-browse-mode .itit-item-right .itit-in-request { align-items: flex-start; }
@media ( max-width: 560px ) { /* (phones: the photo, then the rest under it) */
    #itit-booking-panel.itit-browse-mode .itit-panel-top { grid-template-columns: minmax( 0, 1fr ); }
    #itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-right { grid-column: 1; grid-row: 4; margin-top: 12px; }
    #itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-include { grid-row: 5; }
    #itit-booking-panel.itit-browse-mode .itit-panel-top > .itit-item-desc { grid-row: 6; }
}

/* An item's window, the right column (2026-10-10): the booking box first (its models, its units, Pick dates or its dates' frame
   and pencil, "● Available on your dates"), then Include? (the title on the left, its choices beside it), then the facts. */
#itit-booking-panel.itit-browse-mode .itit-item-right > .itit-panel-models { order: 1; }
#itit-booking-panel.itit-browse-mode .itit-item-right > .itit-panel-units { order: 2; }
#itit-booking-panel.itit-browse-mode .itit-item-right > .itit-use-intro { order: 3; }
#itit-booking-panel #itit-add-more[hidden] { display: none !important; }
#itit-booking-panel .itit-in-request { display: flex; flex-direction: row; align-items: center; gap: 0; margin: 0; }
#itit-booking-panel.itit-browse-mode .itit-in-request .itit-dbox { border: 2px solid #222; } /* (2026-10-11: in the item window, its dates' frame as thick as Pick dates') */
#itit-booking-panel .itit-in-request .itit-dates-pencil { margin: 0 0 0 7px; padding: 0; background: none; border: 0; color: #666; cursor: pointer; }
#itit-booking-panel .itit-in-request .itit-dates-pencil .itit-pencil { display: block; }
#itit-booking-panel .itit-in-request .itit-dates-pencil:hover { color: #000; background: none; }
.itit-item-avail { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: #222; } /* in the request: "● Available on these dates" (its own) */
.itit-item-avail .itit-dd-key { width: 10px; height: 10px; margin-right: 2px; vertical-align: -1px; }
.itit-item-avail .itit-dd-key.is-free { background: #8fd17e; }
.itit-item-avail .itit-dd-key.is-ask { background: #f2cd55; }
.itit-item-avail .itit-dd-key.is-no { background: #ec8c86; }
/* The description's title in bold, as Include? and Inquire (the facts' labels: grey) */
.itit-item-desc .itit-facts-label { font-weight: 600; color: #222; }

/* The row of the item just added with Pick dates (2026-10-10): light yellow for a moment, then it fades */
.itit-items-list li { transition: background-color 1.2s ease, box-shadow 1.2s ease; }
.itit-items-list li.is-new { background-color: #fffbea; box-shadow: -10px 0 0 #fffbea, 10px 0 0 #fffbea; } /* (a very light yellow) */

/* The facts and Include? (2026-10-10): one grid, the labels grey on the left; Include? is its last line, a label like the others,
   its choices in the value column (the label level with the first one). */
#itit-booking-panel.itit-browse-mode .itit-item-right > .itit-item-specs { order: 4; align-self: stretch; display: grid; grid-template-columns: max-content minmax( 0, 1fr ); gap: 0 14px; align-items: start; margin-top: 4px; }
#itit-booking-panel.itit-browse-mode .itit-item-specs #itit-item-facts, #itit-booking-panel.itit-browse-mode .itit-item-specs #itit-item-facts > .itit-detail-specs,
#itit-booking-panel.itit-browse-mode .itit-item-specs #itit-item-facts :is(tbody, thead, tr), #itit-booking-panel.itit-browse-mode .itit-item-specs #itit-suggest { display: contents; }
#itit-booking-panel.itit-browse-mode .itit-item-specs #itit-item-facts td { display: block; grid-column: auto; }
#itit-booking-panel.itit-browse-mode .itit-item-specs #itit-suggest > .itit-suggest-title { grid-column: 1; align-self: center; margin: 6px 0 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: #666; }
#itit-booking-panel.itit-browse-mode .itit-item-specs #itit-suggest > :not(.itit-suggest-title) { grid-column: 2; }
#itit-booking-panel.itit-browse-mode .itit-item-specs #itit-suggest > .itit-suggest-title + * { margin-top: 6px; }
#itit-booking-panel.itit-browse-mode #itit-suggest .itit-suggest-row { flex-wrap: nowrap; align-items: center; gap: 6px; }
.itit-suggest-text { flex: 1; min-width: 0; line-height: 1.4; } /* (its words wrap beside the tick and the picture) */
#itit-booking-panel.itit-browse-mode #itit-suggest .itit-suggest-text .itit-suggest-open { display: inline; text-align: left; }
.itit-suggest-text > * + .itit-suggest-choose { margin-left: 6px; } /* ("… (in your request) change") */
/* A category's choices ("Tripods: choose one"): under Include?, from the left edge, the full width; one line each */
#itit-booking-panel.itit-browse-mode .itit-item-specs #itit-suggest > .itit-suggest-choices { grid-column: 1 / -1; margin: 6px 0 8px; padding: 2px 0 2px 10px; }
#itit-booking-panel.itit-browse-mode .itit-item-specs .itit-suggest-choice { flex-wrap: nowrap; gap: 10px; }
#itit-booking-panel.itit-browse-mode .itit-item-specs .itit-suggest-choice .itit-suggest-open { flex: 1; min-width: 0; text-align: left; }
#itit-booking-panel.itit-browse-mode .itit-item-specs .itit-suggest-choice .itit-suggest-pick { flex: none; }

/* The booking box (2026-10-10): Pick dates or its dates (and the pencil), "Units: [2 ▾] of 4" at their right, as in the request
   window; "● Available on your dates" on the line under them. The pencil centred on the dates' frame. */
#itit-booking-panel.itit-browse-mode .itit-item-right .itit-use-intro { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 0; }
#itit-booking-panel.itit-browse-mode .itit-item-right .itit-use-intro > .itit-item-avail { flex-basis: 100%; }
.itit-item-units { font-size: 13px; color: #222; white-space: nowrap; }
.itit-item-units label { display: inline; margin: 0; font-weight: 400; color: #666; }
#itit-booking-panel .itit-in-request .itit-dates-pencil { display: inline-flex; align-items: center; justify-content: center; align-self: center; height: 24px; min-height: 0; line-height: 1; }

/* Inquire (2026-10-10): the field two lines tall, Send as tall as it; "It goes by email to …" on the right, under Send */
.itit-inquire-form .itit-inquire-row { align-items: stretch; }
.itit-inquire-form .itit-inquire-row .itit-inquire-msg { height: calc( 2 * 1.4em + 12px ); min-height: 0; }
#itit-booking-panel .itit-inquire-row .itit-inquire-btn { align-self: stretch; }
.itit-inquire-form .itit-inquire-actions { justify-content: flex-end; text-align: right; }
@media ( max-width: 480px ) { /* (phones: three lines; Send under it, on the right) */
    .itit-inquire-form .itit-inquire-row .itit-inquire-msg { height: calc( 3 * 1.4em + 12px ); }
    #itit-booking-panel .itit-inquire-row .itit-inquire-btn { align-self: flex-end; }
}

/* FAQ (2026-10-10): a tab of its own; in both windows, instead of the folded How it works, one line to it */
#itit-booking-panel #itit-how { display: none !important; }
.itit-faq-link { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #e4e4e4; font-size: 13px; color: #666; }
#itit-booking-panel.itit-browse-mode .itit-faq-link { order: 7; }
.itit-faq-link .itit-go-faq { margin: 0; padding: 0; background: none; border: 0; font: inherit; color: #222; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.itit-faq-link .itit-go-faq:hover { color: #000; background: none; }
.itit-faq { max-width: 720px; }
.itit-faq-title { margin: 0 0 12px; font-size: 16px; }
.itit-faq-q { border-top: 1px solid #e4e4e4; }
.itit-faq-q:last-child { border-bottom: 1px solid #e4e4e4; }
.itit-faq-q summary { padding: 10px 0; font-size: 14px; font-weight: 600; color: #222; cursor: pointer; }
.itit-faq-q summary:focus { outline: none; }
.itit-faq-q summary:focus-visible { text-decoration: underline; }
.itit-faq-a { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #222; }
.itit-faq-yours { display: inline-block; margin-top: 6px; color: #666; }

/* Send feedback (2026-10-10): a small grey link (the tabs' right end, both windows' last line), a small box over the page */
.itit-feedback-link { margin: 0; padding: 0; background: none; border: 0; font: inherit; color: #222; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.itit-feedback-link:hover { color: #000; background: none; }
.itit-tabs .itit-tabs-feedback { align-self: center; margin-left: auto; padding: 0 2px; font-size: 12px; color: #666; }
.itit-tabs .itit-tab-right ~ .itit-tabs-feedback { margin-left: 14px; } /* (lab managers' tabs on the right: after them) */
.itit-feedback { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba( 0, 0, 0, .35 ); }
.itit-feedback[hidden] { display: none; }
.itit-feedback-box { position: relative; box-sizing: border-box; width: 100%; max-width: 460px; padding: 18px 20px 20px; background: #fff; border-radius: 6px; box-shadow: 0 10px 40px rgba( 0, 0, 0, .25 ); }
.itit-feedback-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #222; }
.itit-feedback-close { position: absolute; top: 16px; right: 18px; padding: 0; background: none; border: 0; font-size: 13px; font-weight: 600; color: #222; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.itit-feedback-help { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: #666; }
.itit-feedback-row { display: flex; align-items: stretch; gap: 10px; }
.itit-feedback-row textarea { flex: 1; min-width: 0; box-sizing: border-box; padding: 6px 8px; border: 1px solid #bbb; border-radius: 3px; font: inherit; font-size: 13px; line-height: 1.4; resize: vertical; }
.itit-feedback-send { flex: none; padding: 7px 16px; background: #fff; border: 2px solid #222; border-radius: 3px; color: #222; font-size: 13px; font-weight: 600; cursor: pointer; }
.itit-feedback-send:disabled { color: #aaa; border-color: #ccc; cursor: default; }
.itit-feedback-result { margin: 8px 0 0; font-size: 13px; text-align: right; }
.itit-feedback-result.is-ok { color: #1f5e1f; }
.itit-feedback-result.is-error { color: #b0302a; }

/* My Bookings (2026-10-10), as the request window: a title, then a row each (its picture, name · model, its dates, its status
   as a dot and words, grey notes, what can be done as underlined words), thin lines between; items booked together: one block. */
.itit-my-title { margin: 4px 0 12px; font-size: 16px; font-weight: 700; color: #222; }
.itit-my-list, .itit-my-sub { margin: 0; padding: 0; list-style: none; }
.itit-my-list { max-width: 720px; border-top: 1px solid #bbb; }
.itit-my-list > li { margin: 0; padding: 10px 0; border-bottom: 1px solid #e4e4e4; }
.itit-my-row { display: flex; align-items: flex-start; gap: 12px; }
.itit-my-row .itit-items-thumb { flex: 0 0 46px; width: 46px; height: 46px; border-color: #ddd; border-radius: 3px; }
.itit-my-row .itit-items-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.4; color: #222; }
.itit-my-row .itit-items-text strong { font-size: 13px; color: #222; }
.itit-my-row .itit-items-model, .itit-my-units { font-weight: 400; color: #666; }
.itit-my-dates { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.itit-my-dates .itit-dbox-icon { flex: none; color: #666; }
.itit-my-status .itit-dd-key { width: 10px; height: 10px; margin-right: 2px; vertical-align: -1px; }
.itit-my-status .itit-dd-key.is-free { background: #8fd17e; }
.itit-my-status .itit-dd-key.is-ask { background: #f2cd55; }
.itit-my-status .itit-dd-key.is-no { background: #ec8c86; }
.itit-my-status .itit-dd-key.is-past { background: #ccc; }
.itit-my-note { color: #666; }
.itit-my-actions { flex: none; margin-left: auto; padding-left: 12px; font-size: 13px; line-height: 1.4; text-align: right; } /* (on the right of its row) */
.itit-my-row .itit-items-text { flex: 1; }
.itit-my-list .itit-row-link { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font: inherit; color: #222; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.itit-my-list .itit-row-link:hover { color: #000; background: none; }
.itit-my-list .itit-row-link:disabled { color: #999; text-decoration: none; cursor: default; }
.itit-my-group-head { display: flex; align-items: flex-start; font-size: 13px; line-height: 1.4; color: #222; }
.itit-my-group-info { display: flex; flex-direction: column; min-width: 0; }
.itit-my-together { color: #666; }
/* Grouped (2026-10-10): a request (My Bookings) or a person (Pending) on top, its dates groups under it; the dates in a frame, as the request window's */
.itit-my-list:has(> .itit-my-request) { border-top: 2px solid #777; } /* (above the first one too) */
.itit-my-list > .itit-my-request { border-bottom: 2px solid #777; } /* (another person (Pending) or request (My Bookings) below: a clearer line) */
.itit-my-request-head { display: block; font-size: 13px; line-height: 1.4; color: #222; }
.itit-my-groups { margin: 6px 0 0; padding: 0; list-style: none; }
.itit-my-groups > .itit-my-group { margin: 0; padding: 8px 0 4px; }
.itit-my-dates .itit-dbox { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: #fff; border: 1px solid #bbb; border-radius: 3px; color: #222; }
.itit-my-sub { margin-top: 8px; padding-left: 14px; border-left: 2px solid #e4e4e4; }
.itit-my-sub > li { padding: 6px 0; }
.itit-extend-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.itit-extend-form label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; color: #666; }
.itit-extend-form input[type="date"] { padding: 2px 6px; font: inherit; font-size: 13px; border: 1px solid #bbb; border-radius: 3px; }
.itit-extend-save { padding: 3px 12px; background: #fff; border: 2px solid #222; border-radius: 3px; color: #222; font-size: 13px; font-weight: 600; cursor: pointer; }

/* Extend (2026-10-10): a small calendar under the booking (the request window's), rings only (no arrows), ✕ on the days it can't reach */
.itit-my-row { flex-wrap: wrap; }
.itit-my-row > .itit-extend-wrap { flex: 0 0 100%; }
.itit-extend-form { display: block; box-sizing: border-box; max-width: 340px; margin: 8px 0 0 58px; padding: 10px 12px 12px; background: #fcfcfb; border: 1px solid #ddd; border-radius: 6px; --itit-cal-bg: #fcfcfb; }
.itit-extend-title { margin: 0 0 4px; font-size: 13px; font-weight: 600; text-align: center; color: #222; }
.itit-extend-wait { margin: 6px 0; font-size: 13px; color: #666; text-align: center; }
.itit-extend-cal .itit-dd-day .itit-dd-num, .itit-extend-cal .itit-dd-day:hover .itit-dd-num { background-image: none !important; color: #222 !important; }
.itit-extend-cal .itit-dd-day.is-past .itit-dd-num { color: #bbb !important; }
.itit-extend-cal .itit-dd-day.is-no .itit-dd-num { color: #a33 !important; font-weight: 400; }
.itit-extend-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 0; font-size: 13px; }
.itit-extend-pick { flex: 1 1 100%; color: #222; }
.itit-extend-pick:empty { display: none; }
.itit-extend-save:disabled { color: #aaa; border-color: #ccc; cursor: default; }
.itit-my-list .itit-row-link.is-chosen { font-weight: 700; text-decoration: none; }
.itit-extend-save[hidden] { display: none; }

/* In the request (2026-10-10): the + stays, white on green (a ✓ looked confirmed); the mouse on it: a white circle with a
   green outline and the same + turned 45°, a little bigger: a × to take it out (several units: the number, then the ×).
   The cards and the list alike. */
.itit-card-img .itit-card-add.is-in:hover, .itit-card-img .itit-card-add.is-in:focus-visible { background: #fff; border-color: #2a8a2a; color: #2a8a2a; }
.itit-card-add-label svg, .itit-open-item .itit-ico-plus { transition: transform .15s ease; transform-box: fill-box; transform-origin: center; }
.itit-card-img .itit-card-add.is-in:hover .itit-card-add-label svg, .itit-card-img .itit-card-add.is-in:focus-visible .itit-card-add-label svg { transform: rotate( 45deg ) scale( 1.2 ); }
.itit-card-img .itit-card-add.is-in.shows-count:hover .itit-card-add-label { visibility: hidden; }
.itit-card-img .itit-card-add.is-in.shows-count:hover { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a8a2a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6.6 6.6l10.8 10.8M17.4 6.6 6.6 17.4'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
#itit-equipment-table .itit-open-item.is-in:hover, #itit-equipment-table .itit-open-item.is-in:focus-visible { color: #2a8a2a; background: none; border-color: transparent; }
#itit-equipment-table .itit-open-item.is-in:hover .itit-ico-ring, #itit-equipment-table .itit-open-item.is-in:focus-visible .itit-ico-ring { fill: #fff; stroke: #2a8a2a; }
#itit-equipment-table .itit-open-item.is-in:hover .itit-ico-plus, #itit-equipment-table .itit-open-item.is-in:focus-visible .itit-ico-plus { stroke: #2a8a2a; transform: rotate( 45deg ) scale( 1.2 ); }
#itit-equipment-table .itit-open-item.is-in:hover .itit-ico-count { visibility: hidden; }
.itit-open-item.is-in.has-count .itit-ico-plus { display: none; } /* (several units: the number, not the +) */
#itit-equipment-table .itit-open-item.is-in.has-count:hover .itit-ico-plus, #itit-equipment-table .itit-open-item.is-in.has-count:focus-visible .itit-ico-plus { display: inline; } /* (the mouse on it: the ×) */