/* ---- Man4ge on a phone. JWD, 2026-10-22: "start working on the UI to make the entire site responsive for mobile", and
   on the first pass: "we must maintain the same rules as on desktop and that the only thing we should be debating is how
   things flow when they can't fit. Everything that can fit must match 100%."
   Worked out in the lab (/lab on dev: the real pages, drawn by the real app with dummy content, tools/lab-capture.js),
   loaded there on top of the real stylesheets; held by tests/browser/labrules.js, which measures every rule below.
   Once reviewed, the site loads this same file. Everything is inside a width query: a desktop is untouched.

   TWO LINES EVERYTHING STANDS ON - the desktop's own alignments, at a phone's width:
     the left line, 16px   the logo, the select squares, and the names when the < closes the tick column
     the right line        26px in from the right edge: the centre of the profile circle, the + and every three dots
   Targets a finger can hit are 44px, drawn no bigger than they are. ---- */

@media (max-width: 767px) {

	/* 1. THE TOP BAR: the breadcrumbs and the profile circle, nothing else (JWD). The breadcrumbs are the header's own
	   copy (index.html .wd-crumbs-phone), in the page's flow, so a long trail wraps onto a second line and pushes the
	   list down rather than being cut off. The left panel's band, which draws them on a desktop, is not shown. */
	.app-content .scrollable-header .btn-group.pull-left,
	.app-content .scrollable-header active-users,
	.app-content .scrollable-header > md-menu,
	.app-content .scrollable-header feed-button { display: none !important; }
	.app-content .scrollable-header > header { display: block !important; height: auto; min-height: 52px; padding: 18px 60px 8px 16px; }
	.wd-crumbs-phone { display: block; }
	.wd-crumbs-phone.breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; padding: 0; background: transparent;
		font-family: 'Bulletin Typewriter', 'Courier New', monospace; font-size: 12.65px; line-height: 18px; color: #54565e; white-space: normal; }
	.wd-crumbs-phone.breadcrumb > li { display: inline-flex; align-items: baseline; flex-wrap: wrap; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
	.wd-crumbs-phone.breadcrumb > li > a, .wd-crumbs-phone.breadcrumb > li > span { color: #54565e; font-weight: 400; white-space: normal; }
	.wd-crumbs-phone.breadcrumb > li + li:before { content: "/"; color: #a3a5aa; padding: 0 8px; }
	.wd-crumbs-phone > .wd-logo-crumb, .wd-crumbs-phone > .wd-logo-crumb > md-menu, .wd-crumbs-phone > .wd-logo-crumb > md-menu > a,
	.wd-crumbs-phone > .wd-logo-crumb > md-menu > a > span { display: inline-block; line-height: 0; vertical-align: -2px; }
	.wd-crumbs-phone > .wd-logo-crumb svg { height: 15px; width: auto; display: block; color: #1d1b18; }
	.wd-crumbs-phone .archive, .wd-crumbs-phone .tag { display: none !important; }
	/* the circle: a 44px place to land, its centre on the right line */
	.app-content .scrollable-header .btn-group.pull-right { position: absolute; top: 4px; right: -3.7px; margin: 0; z-index: 5; }   /* placed only, so its circle centres on the right line; its size is the desktop's */
	.app-content .scrollable-header .btn-group.pull-right .btn { margin: 0; }

	/* The left panel: a drawer over the page (it opens from the logo - see the lab's notes), under the top bar. */
	.sidebar.sidebar-left .wd-band { display: none !important; }
	.sidebar.sidebar-left .scrollable-content { padding-top: 8px !important; }
	.sidebar-left-in .app, .sidebar-right-in .app { transform: none !important; }
	.sidebar.sidebar-left { width: min(86vw, 320px) !important; z-index: 1004; background: #f7f7f7; }
	.sidebar-left-in .app::after { content: ''; position: fixed; inset: 0; background: rgba(29, 27, 24, .25); z-index: 1003; }
	.sidebar.sidebar-right { width: min(92vw, 360px) !important; z-index: 1006; }

	/* The left panel leads with FEED - one word, the other view (JWD: "we don't need content and feed visible at the same
	   time"). */
	/* The nav's top row is FEED's title row, to the pixel, so the three lines and FEED do not move between the two (JWD,
	   2026-11-02). FEED's (app.css .wd-feed-phonehead, .wd-feed-menu, .wd-feed-title) is drawn at the pane's zoom of 1.2:
	   12px above, the lines 34 x 24 starting 6 left of the edge, 6 between them and FEED, a 24px line, 8 below - here
	   14.4, 40.8 x 28.8 at 7.2, 7.2, 28.8 and 9.6. Held at the top while the categories scroll under it. */
	.wd-phone-switch { display: flex; align-items: center; padding: 6.4px 16px 9.6px 7.2px;   /* 14.4 less the 8 the panel's content starts down */ border-bottom: 1px solid #e8e8e8; margin-bottom: 6px;
		position: sticky; top: 0; z-index: 3; background: #fff; }
	.wd-nav-lines { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40.8px; height: 28.8px;
		margin: 0 7.2px 0 0; padding: 0; border: 0; background: transparent; color: #54565e; cursor: pointer; position: relative; }
	.wd-nav-lines svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
	.wd-nav-lines::after { content: ''; position: absolute; left: 50%; top: 50%; width: 52.8px; height: 52.8px; transform: translate(-50%, -50%); }
	/* FEED in the type of FEED's own title (JWD, 2026-11-02: "FEED in the left nav should match the type of FEED in the FEED
	   view") - app.css .wd-feed-title, 700 18px/24px Helvetica Neue in #333, at 1.2: 21.6px on a 28.8px line. */
	.wd-phone-switch a { display: inline-flex; align-items: center; height: 28.8px; font: 700 21.6px/28.8px 'Helvetica Neue', Helvetica, Arial, sans-serif;
		text-transform: uppercase; color: #333; text-decoration: none; cursor: pointer; position: relative; }
	.wd-phone-switch a::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 52.8px; transform: translateY(-50%); }
	.wd-phone-switch .count { margin-left: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e91e63; color: #fff;
		font-size: 10px; line-height: 16px; text-align: center; }

	/* The right panel carries who is online; then the panel's own entries. Not My Time or Digest (JWD, 2026-11-01: "they
	   do not exist in the right panel at all"). */
	.wd-phone-apps { display: block; margin: 0 0 6px; border-bottom: 1px solid #e6e6e6; }
	.wd-phone-apps .list-group-item { display: flex; align-items: center; min-height: 44px; background: transparent; border: 0; color: #1d1b18; }
	.wd-phone-apps .wd-phone-online { font-family: 'DIN1451W01-Mittelschrif', sans-serif; font-size: 11px; text-transform: uppercase; color: #54565e; }

	/* The panels' own lines. Left: the category names stand on the logo's line with the switch, as on a desktop (they
	   were 2px in). Right: the name, the apps, Online and the entries all start on one line. */
	.sidebar.sidebar-left .categories.nav > li > .button { padding-left: 6px; }   /* 8px put the names 2px in from the line */
	.sidebar.sidebar-right h1.app-name { padding-left: 20px; }
	.wd-phone-apps .wd-phone-online, .wd-phone-apps .wd-phone-online md-menu, .wd-phone-apps .wd-phone-online md-menu > * { margin-left: 0 !important; padding-left: 0 !important; }
	.wd-phone-apps .wd-phone-online { padding-left: 19px !important; }

	/* 2. THE LIST'S SIDES: every row - the titles, the rows, the open item - starts and ends on the same two lines. */
	.controls, .list-group-item[class*="content-id-"] { padding-left: 0 !important; padding-right: 0 !important; }
	.controls .row, .list-group-item[class*="content-id-"] > .row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; }
	.controls .row > div, .list-group-item[class*="content-id-"] > .row > div { float: none; width: auto; min-width: 0; padding: 0; }

	/* the tick column: the square on the left line (its 16px box starts at the column's start), the star after it */
	.row-marks { flex: 0 0 60px !important; padding-left: 16px !important; }   /* its own layout kept: a flex box turned the marks into blocks and grew them */
	/* the square and star themselves exactly as on a desktop: their size, and the star starting where the square ends */

	/* the three dots and the +: a 52px end column whose centre is the right line */
	.list-group-item[class*="content-id-"] > .row > div:nth-child(6), .controls .row > div:last-child { flex: 0 0 52px !important;
		display: flex; align-items: center; justify-content: center; padding-right: 0; text-align: center; }
	.controls .row > div:last-child { align-self: stretch; }
	.controls .row > div:last-child .btn-group { float: none; position: static; display: flex; align-items: center; justify-content: center; }
	/* the + and the three dots at the desktop's size - padded to 44px, the dots lay over the status box below them */

	/* 3. THE TITLES: Sort in place of the four (JWD) - the < stays where it was, then Sort. */
	.controls .row > .sort-button:not(.name-head) { display: none !important; }
	.controls .row > .name-head { flex: 1 1 0 !important; display: flex; align-items: center; }   /* the desktop's own height: Sort grew it and lay over the first row */
	.controls .row > .name-head > .wd-title-text, .controls .row > .name-head > span[ng-if] { display: none; }
	.wd-sort-phone { display: inline-flex; align-items: center; margin-left: 10px; }
	.wd-sort-phone md-menu { display: inline-block; }
	.wd-sort-trigger { display: inline-flex; align-items: center; color: #54565e; cursor: pointer; text-decoration: none;
		font-family: 'DIN1451W01-Mittelschrif', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
	.wd-sort-trigger:hover, .wd-sort-trigger:focus { text-decoration: none; color: #1d1b18; }
	.wd-sort-on { margin-left: 6px; color: #1d1b18; }
	.wd-sort-dir { display: inline-block; margin-left: 6px; line-height: 0; transition: transform .15s ease; }
	.wd-sort-dir svg { width: 6px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
	.wd-sort-dir.desc { transform: rotate(180deg); }
	md-menu-content.wd-sort-menu md-menu-item, md-menu-content.wd-sort-menu .md-button { min-height: 44px; }

	/* 4. A ROW: ticks | name | date | dots on the first line; company under the name and status under the date on the
	   second. The second line's columns are the first line's: the company starts where the name does, the status where
	   the date does (JWD: "Names and Companies need to have the same left align", "Date and Status should have the same
	   left align"). A fixed date column is what makes that possible. */
	.list-group-item[class*="content-id-"] > .row > div:nth-child(2) { flex: 1 1 0 !important; order: 1; }
	.list-group-item[class*="content-id-"] > .row > div:nth-child(5) { flex: 0 0 76px !important; order: 2; }
	.list-group-item[class*="content-id-"] > .row > div:nth-child(6) { order: 3; }
	.list-group-item[class*="content-id-"] > .row > .row-marks { order: 0; }
	.list-group-item[class*="content-id-"] > .row::after { content: ''; order: 4; flex: 0 0 100%; }
	.list-group-item[class*="content-id-"] > .row > div:nth-child(3) { order: 5; flex: 1 1 0 !important; margin-left: 79px; }   /* 60 ticks + the name's own 19px indent (measured) */
	.list-group-item[class*="content-id-"] > .row > div:nth-child(4) { order: 6; flex: 0 0 128px !important; }
	.list-group-item[class*="content-id-"] > .row > div:nth-child(4) .status-editor input { padding-left: 0; padding-right: 0; }
	.list-group-item[class*="content-id-"] > .row > div:nth-child(3) .company-field, .list-group-item[class*="content-id-"] > .row > div:nth-child(3) * { margin-left: 0; padding-left: 0; }

	/* A category's row (Edit categories) has no company and no date: its status keeps the first line, beside the name, as
	   on a desktop (JWD, 2026-11-01: "in edit categories set should be aligned with retainers the same way as it is on the
	   desktop view"). It takes the date's place; the empty company and date are not drawn. */
	.list-group-item.wd-cat-row[class*="content-id-"] > .row > div:nth-child(3),
	.list-group-item.wd-cat-row[class*="content-id-"] > .row > div:nth-child(5),
	.list-group-item.wd-cat-row[class*="content-id-"] > .row::after { display: none !important; }
	.list-group-item.wd-cat-row[class*="content-id-"] > .row > div:nth-child(4) { order: 2; }
	/* level with the name, as on a desktop: the row's own tops, not the phone row's centred columns */
	.list-group-item.wd-cat-row[class*="content-id-"] > .row { align-items: flex-start; }

	/* 5. THE < CLOSED: no tick column at all, and the names step onto the left line. */
	.marks-collapsed .row-marks { display: none !important; }
	.marks-collapsed .list-group-item[class*="content-id-"] > .row > div:nth-child(2) { padding-left: 16px; }
		.marks-collapsed .list-group-item[class*="content-id-"] > .row > div:nth-child(3) { margin-left: 16px; }
	.marks-collapsed .controls .row > .name-head { padding-left: 16px; }

	/* 6. A ROW'S MENU as a note's: at its three dots, as wide as its entries (JWD, 2026-11-02: "when you click on the three
	   dots in the header of an item it should follow the exact same behavior as when you click on the three dots within a
	   note and not just automatically take up the full width"). It used to rise from the bottom, full width. Placed by
	   app.js (the three dots on a phone); sized here as app.css sizes the note's, .folder-menu. */
	.md-open-menu-container:has(.item-menu) { width: max-content !important; min-width: 0 !important; }
	/* 120: the note's, which its "Add Subnote" sets - the two the same width */
	.md-open-menu-container:has(.item-menu) md-menu-content.item-menu { width: max-content !important; min-width: 120px !important; max-width: calc(100vw - 16px); }
	md-menu-content.item-menu md-menu-item, md-menu-content.item-menu md-menu-item .md-button { min-height: 44px; }

	/* 7. AN OPEN ITEM: its columns already stack below 768px. Its tick column stands where a closed row's does; its
	   content starts on the name's line; its three dots - the header's and every note's - on the right line. */
	.content-form { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }   /* the desktop's 10px each side put every open item off both lines */
	/* the open row's frame carries the desktop's -20px margins; a phone has no gutter for them to eat */
	.list-group-item[class*="content-id-"] > .contact-detail, .list-group-item[class*="content-id-"] .contact-detail > .row { margin-left: 0 !important; margin-right: 0 !important; }
	.list-group-item[class*="content-id-"] .contact-detail > .row-marks { padding-left: 11px !important; }   /* its square sits 5px further in than a row's (measured) */
	.content-form .content-detail { position: relative; margin: 0; padding-left: 60px !important; padding-right: 52px !important; }   /* the desktop's 45px outranked it: the name ran under the star */
	.marks-collapsed .content-form .content-detail { padding-left: 16px !important; }
	.content-form .content-detail > [class*="col-"] { padding-left: 0; padding-right: 0; }
	.content-form .content-detail > .dots-col { position: static; }
	.content-form .content-detail .dots-col .dots-row { position: absolute; top: 4px; right: 0; width: 52px; display: flex; justify-content: center; z-index: 2; }
	/* The notes as on a desktop (JWD, 2026-11-01: "the notes at the bottom should be aligned ... further to the left to be
	   left aligned with the selection box again matching the alignment on desktop and this will allow the entire box to
	   fit and not get cut off on the right and also make sure that the three dots line up inside the notes with the one
	   inside the header"). Measured on the desktop: a note starts 3px in from the select square's left edge and ends
	   where the header's three dots end, and its own dots are the header's, drawn the same and in the same place. So
	   here: from the square (16px) + 3, to the header dots' right edge - the right line, 26px in, less half their 19.3px
	   width - with the dots left as the desktop draws them. */
	.content-form folders .folders { padding-left: 19px; padding-right: 16.35px; }
	.marks-collapsed .content-form folders .folders { padding-left: 19px; }
	.content-form folders .folders, .content-form folders .folder { width: auto !important; max-width: 100%; box-sizing: border-box; margin-right: 0 !important; }
	/* the + for a new subsection: a 52px end box, its centre on the right line (out past the notes' right edge) */
	.content-form folders .folders > span.pull-right.button { width: 52px; margin-right: -16.35px; padding-left: 0; padding-right: 0; text-align: center; }
	/* An open note's tools on a line of their own under its title (JWD, 2026-11-02: "in notes, the type tools should
	   probably be on a different line as the title so that they don't overlap"). Wide, they are lifted into the title's
	   row at its right (app.css .ta-toolbar.wd-in-head); at a phone's width that row is the title's, and the tools ran
	   over it. Here they drop into the head's flow, after the title, starting on its left edge. */
	.folders .folder .folder-nav .ta-toolbar.wd-in-head { position: static; display: flex; margin: 6px 0 2px; }

	/* TAP SIZE. JWD, 2026-11-02: "You need to do an audit of all images and attachements to make sure that reponsiveness is
	   working as it should and that bttons are not being obsured or are not too small. Most buttons will need to be larger
	   to be approprite size for mobile." Audited at 390 wide (tests/browser/tapsize.js), against Apple's 44 x 44: the
	   list's rows (21 tall) and its head's box, star and sort; the left nav's categories and tags (17); the note's three
	   dots (19 x 15), its tools (11-23) and its + (10 tall); FEED's lines, its FEED, ONLINE, the arrow and the phone
	   (29-34); a message's copy and edit (17 x 12); the voice, read-aloud and Send (28 tall); a menu's entries (36); the
	   search box (34). No picture or attachment ran past the screen.

	   Two ways. Where nothing is near and the place was set by eye - FEED's top, the list's head - the control keeps its
	   look and gains reach: an invisible box round it, 44 each way (::after; none of these used one). Where controls stand
	   in a row a box that wide would take the neighbour's taps, so the reach is 44 tall only. Where there is room the
	   control itself grows: the nav's rows, the list's rows, a menu's entries, the search box, the note's tools, a message's copy and
	   edit. */
	.wd-feed-menu, .wd-feed-back, .wd-feed-goitem, .wd-feed-mute, .wd-dots md-menu > span,
	.chat .turn-copy, .chat .turn-edit, i.button.mark-box, i.button.mark-star,
	.wd-crumbs-phone > .wd-logo-crumb > md-menu > a, .speech-button, .tts-button, .send-button, .wd-feed-online .indicator,
	.folders .folder .folder-nav .ta-toolbar.wd-in-head .btn-group > .btn { position: relative !important; }
	/* !important: a reach box measures itself against the nearest positioned box, and the phone's (.text-mute-button) was
	   held static by a stronger rule - its box took the height of the whole pane and every tap on it. tapsize.js 8. */
	/* 44 each way */
	.wd-feed-menu::after, .wd-feed-online .indicator::after {
		content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
	/* 44 tall, in a row */
	.wd-feed-back::after, .wd-feed-goitem::after, .wd-feed-mute::after, i.button.mark-box::after, i.button.mark-star::after,
	i.button.mark-plus::after, .wd-crumbs-phone > .wd-logo-crumb > md-menu > a::after, .chat .turn-copy::after, .chat .turn-edit::after,
	.speech-button::after, .tts-button::after, .send-button::after, .folders .folder .folder-nav .ta-toolbar.wd-in-head .btn-group > .btn::after {
		content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }
	/* The three dots - a note's and the item's own - keep their drawn size: their place is held by four rules at once
	   (labrules R8, R9, R11, R20: centred on the circle's line, the note ending where they end), and drawn larger they
	   cannot keep both. Their reach is the 44 box round them, 342-386 on a 390 screen. */
	.item-settings md-menu > span.fa-ellipsis-v { position: relative; display: inline-block; }
	.wd-dots md-menu > span::after, .item-settings md-menu > span.fa-ellipsis-v::after {
		content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
	/* a message's copy and edit: 17 x 12 to 24 x 17, and 44 wide to reach */
	.chat .turn-copy, .chat .turn-edit { min-width: 24px; min-height: 17px; }
	.chat .turn-copy svg, .chat .turn-edit svg { width: 18px; height: 18px; }
	/* the left nav: every category and tag a 44 row */
	#category_nav .categories li > span.button, #category_nav .tags li > span.button { display: inline-block; padding-top: 3px; padding-bottom: 3px; }
	/* the list's rows */
	.contact-summary { min-height: 44px !important; padding-top: 11.5px; padding-bottom: 11.5px; box-sizing: border-box; }
	/* a menu's entries */
	.md-open-menu-container md-menu-item, .md-open-menu-container md-menu-item > .md-button { min-height: 44px; height: auto; }
	/* the search box, and 16px so the phone does not zoom in on it */
	#search input.form-control, .search-input input.form-control { height: 44px; font-size: 16px; }
	/* the note's tools: 30 wide, 36 tall, each group wrapping whole */
	/* The note's tools: all eleven on the one line under the title (JWD, 2026-11-02: "the tools that are now successfully not
	   on the same line as a title should easily still fit on one line and not be broken into two lines"), spread evenly
	   across it - the three groups opened up into one row of eleven, each 28 wide and 36 tall, the 9px between them on a
	   wide screen given up. !important: the first group (file, link, voice, read-aloud) has its own size by name (app.css). */
	/* The first tool's mark on the title's left edge and the last's on the note's right edge: each sits inside its 28px box,
	   and the row spreads them evenly, so it reaches out 10 on the left and 15 on the right (set by measuring, tapsize.js 3). */
	.folders .folder .folder-nav .ta-toolbar.wd-in-head { flex-wrap: nowrap !important; justify-content: space-between; width: auto; margin-left: -10px !important; margin-right: -15px !important; }
	.folders .folder .folder-nav .ta-toolbar.wd-in-head .btn-group { display: contents; }
	.folders .folder .folder-nav .ta-toolbar.wd-in-head .btn-group > .btn { flex: 0 0 28px; width: 28px !important; min-width: 0 !important; height: 36px !important;
		margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
	/* the list's head: a 44 row, so the box, the star and the sorts have room above and below them for a finger, clear of
	   the top bar over it */
	.app-content .controls > .row { padding-top: 13px; padding-bottom: 13px; }
	.sort-button::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }

	/* The three dots' menu at the dots (app.js, the three dots on a phone): a 44 band across its top for the X, which
	   stands where the dots were - over the band's right end. The list under the band scrolls when it is long. */
	.md-open-menu-container.wd-dots-menu md-menu-content { padding-top: 44px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.wd-dots-x { position: fixed; z-index: 1100;   /* over the item menu, which stands at 1002 */ width: 44px; height: 44px; padding: 12px; margin: 0; border: 0; background: transparent;
		color: #1d1b18; cursor: pointer; display: flex; align-items: center; justify-content: center; }
	.wd-dots-x svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }

	/* NEVER SIDEWAYS. JWD, 2026-11-02: "overall an open item that has an open note seems to create more with than fits and
	   is bringing up side scrolling which should not ever happen", and "feed on mobile ... allows for a side-scrolling".
	   Measured (tests/browser/noside.js): an open note's page 397 wide on a 390 screen - the dots' reach box, above - and
	   FEED's list 358 in 325 - a web address in an entry, one word with nowhere to break. Long words and links break
	   anywhere in FEED, a chat, a To Do and a note; and the page, FEED and an open entry never scroll sideways whatever a
	   later change puts in them. */
	.wd-feed-pane .text, .wd-feed-pane .convo, .chat .msg-text, .chat .text, .todo .text, .notes .note, .notes .note .ta-bind, .folder-peek { overflow-wrap: anywhere; word-break: break-word; }
	.app-content .scrollable-content, .wd-feed-scroll { overflow-x: hidden !important; }
	/* clip, not hidden: hidden on one axis turns the other to auto, and the pane itself never scrolls */
	.wd-feed-side, .wd-feed-pane { overflow-x: clip !important; }

	/* AN OPEN ATTACHMENT. Its arrows outside it, in the margins either side, not over it (JWD, 2026-11-02: "the arrows are
	   not currently showing up in the right place they need to move outward and not sit on top of the dedicated image
	   area"): wide, each is a fifth of the picture, laid over it and shown on hover - a phone has no hover, so a tap left
	   them over the picture. Here 44 wide, just outside its edges, always shown. A swipe steps too (attachmentDetail.directive.js). */
	.attachment-detail, .attachment-detail .att-container { overflow: visible !important; }
	.attachment-detail .left-nav, .attachment-detail .right-nav { width: 44px; opacity: .8; font-size: 40px; z-index: 2; }
	.attachment-detail .left-nav { left: -44px; }
	.attachment-detail .right-nav { right: -44px; }
	.attachment-detail .left-nav > i, .attachment-detail .right-nav > i { left: 50%; right: auto; transform: translate(-50%, -50%); top: 50%; }
	/* The large thumbnails within the attachments' own area (JWD, 2026-11-02: "When selecting the larger image view in the
	   attachment area you need to make sure to fit it within the allocated area for attachments"): a large tile is 300
	   square with 20 beside it, and the area holds 295 inside its padding. Here as wide as the area, 300 at most, square. */
	.files.view-mode-large .file { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1 / 1; margin-right: 0; }
}