/* ---- 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 the desktop top row's FEED / CONTENT tab - one word, the other view, as there (JWD: "we
	   don't need content and feed visible at the same time") - on the left line, in the top row's type and grey. */
	.wd-phone-switch { display: block; padding: 6px 16px 10px; border-bottom: 1px solid #e6e6e6; margin-bottom: 6px; }
	.wd-phone-switch a { display: inline-flex; align-items: center; min-height: 44px; font-family: 'DIN1451W01-Mittelschrif', sans-serif;
		font-weight: 200; font-size: 11px; text-transform: uppercase; color: #54565e; text-decoration: none; cursor: pointer; }
	.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 rises from the bottom, full width, rows a thumb can hit. */
	.md-open-menu-container:has(.item-menu) { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important;
		bottom: 8px !important; max-height: 72vh; overflow: auto; }
	.md-open-menu-container:has(.item-menu) md-menu-content.item-menu { width: 100% !important; max-width: none; max-height: none; }
	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; }
}