@import url("./ui/memberMeetingHeader.css");
@import url("/assets/member-responsive.css");
@import url("./ui/memberMeetingDesktop.css");
/* Accepted v11 UI (evidence/mr11/meeting-roles-v11.html), scoped under
   .mrv11 to embed in the shared LIFF feature shell instead of owning
   html/body, matching this repo's .member-meeting / .roles-workspace
   scoping convention. Colors/layout/classes/order preserved exactly. */
.mrv11{
  --cream:#FBF8F2;--paper:#FFFDF9;--ink:#27313A;--muted:#7D746D;--line:#E9E1D7;
  --gold:#C8A96B;--rose:#EFD7DC;--rose2:#9B5B6D;--sage:#DCE7D8;--sage2:#5E7D63;
  --apricot:#F4DDC7;--danger:#A55757;--shadow:0 7px 20px rgba(85,70,60,.07);
  color:var(--ink);font-family:"Microsoft JhengHei UI","Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;
}
/* feature.html loads officer.css globally ahead of this stylesheet, and this
   module's panel *is* the shared <main id="app"> element (className set to
   mrv11 directly on it, not a fresh wrapper) -- so officer.css's bare
   `main{max-width:1080px;margin:auto;padding:40px 24px 72px}` would otherwise
   double-pad/width-cap this module's own .stage/.app full-bleed layout. This
   overrides only that one outer element, scoped to this feature; every other
   feature.html route keeps officer.css's shared main rule untouched. */
main.mrv11{max-width:none;margin:0;padding:0}
.mrv11 *{box-sizing:border-box}
/* `min-height:0` is a host adaptation, not a design change: feature.html loads
   officer.css ahead of this stylesheet, and officer.css's bare
   `button,select{…min-height:46px…}` leaks into every button on this page that
   does not set its own -- the date cards, the date arrows, the speech pickbox,
   the 中 / EN toggle and the Save button. In the standalone accepted original
   those buttons have no min-height at all, so the leak silently inflated the
   date strip and the speech row and pushed everything below them down. Every
   other leaked declaration (font, colour, background, border, radius, padding)
   is already overridden by the original's own rules further down; this is the
   one it had no rule for, alongside `text-align` -- officer.css's own
   `button{cursor:pointer;text-align:left}` left-aligned the wrapped 中 / EN
   toggle label, which the UA default centres in the standalone original. Same
   category as the `nav{margin/gap}` reset below (../evidence/b3-result.md D3). */
.mrv11 button{font:inherit;color:inherit;cursor:pointer;min-height:0;text-align:center}
/* Same category: officer.css's `button:disabled{opacity:.55;cursor:default}`
   dimmed the disabled Save button, which the accepted original styles only with
   its own `.save:disabled` background. The original's own opacity rules (the
   .25 on a disabled date arrow) are further down and keep winning on
   specificity. */
.mrv11 button:disabled{opacity:1}
.mrv11 .stage{min-height:100dvh;display:flex;justify-content:center;background:#ece8e1}
/* `height` (not `min-height`): the accepted original's own `.app` rule is
   `height:100dvh;overflow:hidden`, which is what makes the phone frame a
   fixed box with its own internally scrolling content and a bottom entry row
   pinned to the frame. With `min-height` the frame grew with the content
   instead, the approved `main{height:calc(100% - 64px)}` percentage resolved
   against an auto-height parent, and the entry row ended up floating in the
   middle of a long page instead of staying at the bottom while the content
   scrolled (NAV_SWIPE_MENU_V1_REVIEW_20260929.md section 2; visible in
   ../evidence/b-visual/roles-v11-nav.png). See ../evidence/b3-result.md. */
.mrv11 .app{
  position:relative;width:min(100%,430px);height:100dvh;overflow:hidden;
  background:
    radial-gradient(150px 100px at 10% 3%,rgba(244,221,199,.58),transparent 72%),
    radial-gradient(140px 100px at 90% 8%,rgba(220,231,216,.48),transparent 72%),
    var(--cream)
}
@media(min-width:700px){
  .mrv11 .stage{padding:22px 0}
  .mrv11 .app{height:min(844px,calc(100dvh - 44px));border-radius:28px;box-shadow:0 22px 70px rgba(45,38,33,.16)}
}

/* `font-weight:400` is a host adaptation like the min-height reset above:
   officer.css also has a `.eyebrow{letter-spacing:.16em;font-size:.72rem;font-weight:700}`
   rule, and only its font-weight survives the original's own .eyebrow rule,
   which widened this line. The standalone accepted original's .eyebrow has no
   font-weight at all, i.e. the UA default. */


/* 19px + `white-space:nowrap`, exactly the accepted original. The previous
   16px + `flex-wrap:wrap` pair existed only to fit a stacked bilingual
   "zh · en" title that was never an approved amendment; the page is
   single-language with a 中 / EN toggle again, so the approved geometry is
   restored. See ../evidence/b4-result.md. */


/* The original's own topbar 中 / EN toggle (accepted original `.lang`). */

.mrv11 main{
  padding:8px 12px calc(82px + env(safe-area-inset-bottom))
}
/* The accepted original's own rule, declaration-for-declaration, with only the
   `.mrv11 ` scope prefix added. B3's `position:sticky` + `background:var(--cream)`
   (and the `padding-top:4px` already removed in B4) were an engineering
   addition, not an approved amendment: they put a flat cream band over the
   app's radial gradient. NAV_SWIPE_MENU_V1_REVIEW_20260929.md section 2 only
   requires that the upper screen and the selected date not move HORIZONTALLY
   while the entry row is swiped -- which the rail's own overflow containment
   provides -- and never asks for a vertically pinned date strip. The middle
   content stays vertically scrollable and reachable through
   `.app[data-nav-host="roles"]>main{overflow-y:auto}` below, and the entry row
   stays fixed at the bottom of the frame. See ../evidence/b5-result.md R2. */




.mrv11 .date-viewport::-webkit-scrollbar{display:none}






.mrv11 .section{margin-top:7px}
.mrv11 .section-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 5px}
/* 14px, the accepted original's own value (13px was a bilingual-copy fit). */
/* `letter-spacing:normal` is the third officer.css host adaptation (see the
   button min-height and .eyebrow notes above): officer.css's bare
   `h2{font-size:1.6rem;letter-spacing:-.025em}` leaks its letter-spacing into
   these headings, which the standalone accepted original does not have. */
.mrv11 .section-title{font-size:14px;font-weight:900;margin:0;letter-spacing:normal}
.mrv11 .section-sub{font-size:9px;color:var(--muted)}
.mrv11 .choice-row{
  background:#fffdf9;border:1px solid #E7DDD3;border-radius:12px;min-height:44px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 9px;box-shadow:var(--shadow)
}
.mrv11 .choice-main{font-size:12px;font-weight:850}
.mrv11 .choice-meta{font-size:9px;color:var(--muted);margin-top:2px}
.mrv11 .pickbox{
  width:28px;height:28px;border:1px solid #D8CEC4;background:#fff;border-radius:8px;
  display:grid;place-items:center;font-size:17px;color:transparent;padding:0
}
.mrv11 .pickbox.on{background:#8D5666;border-color:#8D5666;color:#fff;box-shadow:inset 0 2px 5px rgba(70,38,48,.18)}
/* Disabled booking choices are visibly distinct, per the member UI update. */
.mrv11 .roles-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,minmax(44px,auto));grid-auto-flow:column;gap:6px}
.mrv11 .role-tile{
  min-width:0;min-height:44px;border:1px solid #E1D8CF;background:#fffdf9;border-radius:11px;
  padding:7px 8px;text-align:left;box-shadow:0 3px 10px rgba(85,70,60,.035);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center
}
.mrv11 .role-copy{min-width:0;display:flex;flex-direction:column;justify-content:center}
.mrv11 .role-tile .rname{font-size:10.5px;font-weight:850;line-height:1.12}
.mrv11 .role-tile .rmeta{font-size:8.5px;color:#8A817A;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrv11 .role-tile.open:hover{border-color:#D1BFC2}
.mrv11 .role-tile.selected{
  background:#EFD7DC;border-color:#CFA8B5;color:#754857;
  box-shadow:inset 0 2px 7px rgba(112,71,84,.11)
}
.mrv11 .role-tile.selected .rmeta{color:#865867;font-weight:800}
.mrv11 .role-tile.occupied{background:#F3F0EC;color:#8A817A;cursor:pointer}
.mrv11 .role-tile.occupied .rname{color:#756D67}
.mrv11 .role-tile.current{border-color:#CFA8B5}
.mrv11 .interest-pill{border:1px solid #D9CEC4;background:#fffdf9;border-radius:999px;padding:4px 6px;font-size:8px;font-weight:850;color:#7D4D5C;white-space:nowrap}
.mrv11 .interest-pill.on{background:#F8E9EB;border-color:#CFA8B5}
.mrv11 .savebar{
  margin-top:8px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center
}
.mrv11 .draft{
  min-width:0;background:#FFF8F1;border:1px solid #E8DACB;border-radius:11px;padding:7px 9px;
  font-size:9.5px;color:#705F54;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.mrv11 .save{
  border:0;background:#8D5666;color:#fff;border-radius:10px;padding:9px 14px;
  font-size:11px;font-weight:900;box-shadow:0 5px 12px rgba(116,72,86,.15)
}
.mrv11 .save:disabled{background:#C9C1BC;box-shadow:none;cursor:default}
.mrv11 .modal-backdrop{position:absolute;inset:0;background:rgba(35,31,28,.28);z-index:70;display:none;align-items:center;justify-content:center;padding:20px}
.mrv11 .modal-backdrop.show{display:flex}
.mrv11 .modal{width:min(100%,340px);background:#FFFDF9;border:1px solid #E4D8CD;border-radius:16px;box-shadow:0 18px 50px rgba(45,38,33,.22);padding:16px}
/* 16px, the accepted original's own value (15px was a bilingual-copy fit). */
.mrv11 .modal h3{margin:0 0 7px;font-size:16px}
.mrv11 .modal p{margin:0 0 14px;font-size:11px;color:#6F665F;line-height:1.55}
.mrv11 .modal-actions{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.mrv11 .modal-actions button{border:1px solid #D9CEC4;background:#fff;border-radius:9px;padding:7px 9px;font-size:10px;font-weight:800}
.mrv11 .modal-actions .primary{background:#8D5666;border-color:#8D5666;color:#fff}
.mrv11 .modal-actions .danger{background:#FFF3F3;border-color:#E2C1C1;color:#9A5656}
/* Shared nav leave guard. Declaration-for-declaration from the pinned approved
   nav stylesheet docs/engineering/uieq/source/hub-roles-nav/member-nav-swipe2.css
   line 20 (SHA-256 7a63b390...8257), with only the .mrv11 scope prefix added.
   The dialog box itself is intentionally left to the UA <dialog> defaults, as
   in the pinned asset. `padding`/`text-align`/`color`/`min-height` are reverted
   on the action buttons because officer.css's bare `button,select` rule (see
   the note at the top of this file) supplies values the standalone pinned
   overlay never had to defend against. */
.mrv11 #navLeaveDialog{width:min(350px,calc(100vw - 32px));padding:22px;border:1px solid #E9E1D7;border-radius:18px;background:#FFFDF9;color:#27313A;box-shadow:0 20px 60px #352b3333;max-height:calc(100dvh - 30px);overflow:auto}
.mrv11 #navLeaveDialog::backdrop{background:#332b394d}
.mrv11 #navLeaveDialog h2{margin:0 0 10px;font-size:17px;letter-spacing:normal}
.mrv11 #navLeaveDialog p{font-size:13px;line-height:1.6;color:#7D746D;margin:0 0 18px}
.mrv11 .nav-leave-actions{display:grid;gap:8px}
.mrv11 .nav-leave-actions button{min-height:43px;border:1px solid #E4D8CD;border-radius:10px;background:#FFFDF9;font:inherit;font-size:13px;font-weight:700;padding:revert;text-align:revert;color:inherit}
.mrv11 .nav-leave-actions #navSave{background:#8D5666;color:white;border-color:#8D5666}
.mrv11 .nav-leave-actions #navDiscard{color:#A55757}
.mrv11 [role="status"]{font-size:10px;color:#705F54;background:#FFF8F1;border:1px solid #E8DACB;border-radius:10px;padding:7px 9px;margin:6px 0}
/* Shared seven-entry navigation (NAV-SWIPE-1/2): replaces the old five-column
   grid + "more" sheet with one horizontally scrollable row, scoped under
   .mrv11 like the rest of this stylesheet. Class names match the shared
   member-nav.css overlay (public/frontend/assets/member-nav.css), which this
   feature page does not load (it is not the My Hub/shell document), so the
   layout rules are declared locally here instead.

   Values below are the pinned approved nav stylesheet
   docs/engineering/uieq/source/hub-roles-nav/member-nav-swipe2.css
   (SHA-256 7a63b390f02d6005321a1b3275055285af7ba7152ae587a84ad20942b9e8a257,
   RENDER_CONTRACT.md "NavCSS"), declaration-for-declaration, with only the
   `.mrv11 ` scope prefix added -- including its own
   `.app[data-nav-host="roles"]` content-height / sticky-savebar rules, which
   are what keep the entry row at the bottom of the phone frame while only
   the middle content scrolls. The previous values here were an engineering
   re-derivation (68px row, 22px arrows, 68px/9px entries, 20px/1.8 icons,
   gold dot instead of the approved rose pill + 18x3 underbar, and
   `position:sticky` in a non-scrolling parent, which left the row floating
   mid-page). See ../evidence/b3-result.md. */
.mrv11{--member-nav-height:calc(74px + env(safe-area-inset-bottom,0px))}
/* `margin:0;gap:0` are not in the pinned overlay (which ran in a standalone
   HTML page with no other stylesheet). This page is served inside
   feature.html, which loads officer.css first, and officer.css has a bare
   `nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;
   margin-bottom:28px}` rule that leaks straight into this element: it was
   lifting the whole entry row 28px off the bottom of the phone frame and
   inserting 7px gaps between the arrows and the rail. Resetting to the
   pinned overlay's own (defaulted) values, nothing more. */
.mrv11 .member-nav{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--member-nav-height);margin:0;gap:0;padding:0 0 env(safe-area-inset-bottom,0px);border:0;border-top:1px solid #E9E1D7;background:#FFFDF9;z-index:24;display:grid;grid-template-columns:23px minmax(0,1fr) 23px;align-items:stretch;box-sizing:border-box;isolation:isolate}
.mrv11 .member-nav-viewport{min-width:0;overflow-x:auto;overflow-y:hidden;display:flex;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;-webkit-overflow-scrolling:touch;cursor:grab}
.mrv11 .member-nav-viewport::-webkit-scrollbar{display:none}.mrv11 .member-nav-viewport.dragging{cursor:grabbing;scroll-behavior:auto}
.mrv11 .member-nav-link{flex:0 0 25%;min-width:78px;min-height:64px;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:8px 3px 10px;text-decoration:none;font:inherit;font-size:10px;font-weight:500;line-height:1.2;color:#8A817A;border:0;background:transparent;border-radius:10px;user-select:none;-webkit-user-drag:none;touch-action:pan-x;scroll-margin-inline:8px}
.mrv11 .member-nav-link svg{width:22px;height:22px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.mrv11 .member-nav-label{max-width:100%;min-height:24px;display:flex;align-items:center;justify-content:center;text-align:center;overflow-wrap:normal;pointer-events:none}
.mrv11 .member-nav-link[aria-current="page"]{color:#8D5666;font-weight:800;background:linear-gradient(180deg,#FAF0F1 0%,#FFFDF9 86%)}
.mrv11 .member-nav-link[aria-current="page"]:after{content:'';position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:#C8A96B}
.mrv11 .member-nav-arrow{display:grid;place-items:center;width:23px;height:72px;padding:0;border:0;background:transparent;color:#9B7380;cursor:pointer;font-size:24px;font-weight:400;line-height:1;touch-action:manipulation}
.mrv11 .member-nav-arrow:disabled{opacity:.2;cursor:default}.mrv11 .member-nav button:focus-visible{outline:2px solid #8D5666;outline-offset:-3px}
.mrv11 .app[data-nav-host="roles"]>main{height:calc(100% - 64px - var(--member-nav-height));overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:10px;scrollbar-width:none}
.mrv11 .app[data-nav-host="roles"]>main::-webkit-scrollbar{display:none}
.mrv11 .app[data-nav-host="roles"] .savebar{position:sticky;bottom:0;z-index:6;padding-top:9px;padding-bottom:9px;background:#FBF8F2;border-top:1px solid #E9E1D7;box-shadow:0 -7px 12px #FBF8F2}
@media(max-height:700px){
  .mrv11 main{padding-top:6px}
  .mrv11 .app[data-nav-host="roles"]>main{height:calc(100% - 58px - var(--member-nav-height))}

  .mrv11 .section{margin-top:5px}.mrv11 .role-tile{min-height:39px;padding:5px 7px}.mrv11 .choice-row{min-height:40px}.mrv11 .savebar{margin-top:6px}
}
@media(prefers-reduced-motion:reduce){.mrv11 .member-nav-viewport{scroll-behavior:auto}.mrv11 .member-nav *{transition:none!important;animation:none!important}}
/* NAV-SWIPE-2: clearer active item, no rainbow per-route coloring. */
.mrv11 .member-nav-link{font-size:11px;color:#716962}.mrv11 .member-nav-link[aria-current="page"]{color:#66384B;background:#EBCDD6;box-shadow:inset 0 0 0 1px #BD8495;border-radius:10px;font-weight:800}.mrv11 .member-nav-link[aria-current="page"]:after{width:18px;height:3px;bottom:4px;border-radius:3px;background:#895366}
.mrv11 .toast{
  position:absolute;left:50%;bottom:82px;transform:translateX(-50%) translateY(10px);z-index:80;
  background:#4E4945;color:#fff;border-radius:999px;padding:9px 13px;font-size:11px;opacity:0;
  pointer-events:none;transition:.18s;max-width:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.mrv11 .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Member-approved compact booking: color groups and committed role emphasis. */
.mrv11 .speech-section .section-title{color:#3f6650}
.mrv11 .speech-section .choice-row{background:#eef5ee;border-color:#c4d7c7}
.mrv11 .tme-section .section-title{color:#805d3d}
.mrv11 .tme-section .choice-row{background:#fcf1e5;border-color:#e4cdb5}
.mrv11 .role-section .section-title{color:#50687b}
.mrv11 .role-section .role-tile.open:not(.selected){background:#f2f5f7;border-color:#d4dfe5}
.mrv11 .tme-meta{display:flex;align-items:center;gap:8px;min-width:0}
.mrv11 .tme-meta .choice-meta{min-width:0;margin-top:0;overflow-wrap:anywhere}
.mrv11 .tme-meta .interest-pill{min-height:32px;min-width:74px;padding:4px 8px;flex-shrink:0}
.mrv11 .pickbox:disabled:not(.on){background:#e5e2dd;border-color:#bdb6ad;color:#91887e;cursor:not-allowed;box-shadow:none;font-size:0}
.mrv11 .pickbox:disabled:not(.on)::after{content:'—';font-size:16px;font-weight:600}
.mrv11 .member-meeting-navigation .own-arrangements{min-height:44px;padding:7px 14px;background:#efd7dc;border-top:1px solid #cfa8b5;border-bottom:1px solid #cfa8b5;border-left:4px solid #9b5b6d;gap:12px}
.mrv11 .own-arrangements small{font-size:10px;color:#865867;font-weight:650;flex-shrink:0}
.mrv11 .own-arrangements strong{font-size:15px;line-height:1.35;font-weight:850;color:#754857;text-align:right}
.mrv11 .own-arrangements:not(.has-roles){background:#f1eee8;border-color:#ded6cb}
.mrv11 .own-arrangements:not(.has-roles) strong{color:#7d746d;font-weight:650}

/* Reserve the real header/date/summary heights and the fixed bottom menu. */
@media(max-width:959px){
 .mrv11 .app{display:flex;flex-direction:column;padding-bottom:var(--member-nav-height)}
 .mrv11 .app>header,.mrv11 .app>.meeting-navigation{flex:0 0 auto}
 .mrv11 .app[data-nav-host="roles"]>main{flex:1 1 auto;min-height:0;height:auto;width:100%;max-width:none;margin:0;padding-top:6px;padding-bottom:8px}
 .mrv11 .section{margin-top:5px}
 .mrv11 .role-section .roles-grid{gap:5px}
 .mrv11 .app[data-nav-host="roles"] .savebar{margin-top:6px;padding-top:6px;padding-bottom:6px}
}

/* Editing shortcuts match the existing rose outline controls. */
.mrv11 .choice-actions{display:flex;align-items:center;gap:8px}
.mrv11 .role-edit{display:grid;place-items:center;width:34px;height:34px;min-width:34px;padding:7px;border:1px solid #d4b8c3;border-radius:9px;background:#fffafb;color:#8d5666}
.mrv11 .role-edit svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.mrv11 .role-edit:disabled{opacity:.5;cursor:default}
.mrv11 .role-edit:focus-visible{outline:2px solid #9b5b6d;outline-offset:2px}
.role-theme-loading{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;gap:14px;background:#fbf8f2f5;color:#27313a;font:14px system-ui,sans-serif}
.role-theme-loading button{min-height:44px;padding:10px 18px;border:1px solid #d4b8c3;border-radius:10px;background:#fffafb;color:#8d5666;font:inherit}