/* ============================================================
   frame.css - ShareTechnote page frame layout
   Modern flexbox replacement for the legacy <table> page frame.

   Desktop layout (mirrors the original table) :

   +---------+----------------------------+------------------+
   |         |  page title                |                  |
   |  left   +----------------------------+------------------+
   |  menu   |  content                   |  right panel     |
   |  menu   |  820px                     |  401px           |
   +---------+----------------------------+------------------+

   Usage :
     <div class="frame">
         <aside class="frame-left"> ... left menu ... </aside>
         <page-title class="frame-title"> ... </page-title>
         <main class="frame-content"> ... </main>
         <aside class="frame-right"> ... right panel ... </aside>
     </div>
   ============================================================ */

:root {
    --frame-top-height: 123px;   /* header 58px + main menu 65px */
    --frame-title-height: 24px;  /* page-title row */
}

/* NOTE on AdSense: the responsive ad unit in panel_right.html
   (data-ad-format="auto") injects "height: auto !important" inline
   on all of its ancestors (.content, .frame, .frame-right, ...) when
   it initializes. Inline !important cannot be overridden from a
   stylesheet, so every scroll/clip height below is derived directly
   from the viewport (100vh) instead of from an ancestor's height.
   Only non-ancestors of that ad (.frame-content, .frame-left) keep
   working through "height"; ancestors rely on max-height, which
   AdSense does not touch. */

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

#header,
#menu_main {
    flex: 0 0 auto;
}

.content {
    flex: 0 0 auto;
    height: calc(100vh - var(--frame-top-height));
    min-height: 0;
    overflow: hidden;
}

.frame {
    display: grid;
    grid-template-columns: max-content 820px 401px;
    grid-template-areas:
        "left title spacer"
        "left content right";
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    column-gap: 2px;           /* mimics the default table cellspacing */
    height: calc(100vh - var(--frame-top-height));
    min-height: 0;
    overflow: hidden;
    width: max-content;
}

/* Left menu column */
.frame-left {
    grid-area: left;
    align-self: start;
    min-height: 0;
    max-height: calc(100vh - var(--frame-top-height));
    overflow: hidden;
    width: max-content;
}

/* Title row in the content column */
.frame-title {
    grid-area: title;
    display: block;            /* occupies its own row, like the old title <tr> */
    height: var(--frame-title-height);
}

/* Main content column */
.frame-content {
    grid-area: content;
    height: calc(100vh - var(--frame-top-height) - var(--frame-title-height));
    width: 820px;
    min-width: 0;
    min-height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Right panel column */
.frame-right {
    grid-area: right;
    align-self: start;
    min-height: 0;
    max-height: calc(100vh - var(--frame-top-height));
    overflow: hidden;
    width: 401px;
}